React Router

官网地址:https://reacttraining.com/react-router/web/api/Route

React Router 4版面以后有巨大的变化 4后的思想是:一切皆组件(路由写成组件)
之前的版本都是传统思想:路由应该统一在一处渲染(类似vue里的路由表)

React Router包含四个包
  • react-router:React Router核心API
  • react-router-dom:React Router 的DOM绑定,在浏览器中运行不需要额外安装react-router
  • react-router-native:React Native 中使用,实际应用中不会使用这个
  • react-router-config:静态路由配置

React中主要使用react-router-dom

React Router使用
  1. 安装
    • npm i react-router-dom
  2. 在react项目中找到入口文件(src下的index.js文件),这个个文件中引入react-router-dom
    • import {BrowserRouter as Router} from "react-router-dom"
      • as的作用是给一个模块起一个别名

        • 使用as就可以
          • <Router></Router>
        • 不用as就这样写
          • <BrowserRouter ></BrowserRouter >
      • React Router 路由有两种模式
        1. HashRouter
          • 写法:[#/home]传统浏览器模式 hashchange事件
        2. BrowserRouter
          • 写法:[/home]h5 的history模式
          • 注意:BrowserRouter 需要后端支持

      • index.js代码(项目入口文件index.js文件)
        import ReactDom from 'react-dom'
        import {BrowserRouter as Router} from "react-router-dom"
        import App from "./App.js"
        
        ReactDom.render(
            <Router>
                <App/>
            </Router>,
            document.getElementById('root')
        )
        
  3. 配置路由
    • 在Layout文件夹(组件入口文件)下的index.js中配置路由
    • 先引入import {Route,Switch,Redirect} from "react-router-dom"
      • 在react-router-dom包中需要引入三个东西
      • react-router-dom
        • Route:是用来通过path路径来匹配对应路径的组件
        • Switch:表示一次之渲染一次路由
        • Redirect:重定向组件
          !!exact 表示路径完全匹配
    • Router
      • path 路由路径
      • component 路由对应组件
      • render 可以渲染一个组件
      • children 子组件
      • component / render / children 这三个先其中一个使用
      • 路由渲染组件三种写法
        • <Route path="/home" component={Home}></Route>
          • 优点:这种路由组件,在组件中有路由属性
          • 缺点:不能在组上写属性了
        • <Route path="/home" render={()=><Home name={this.state}/>}></Route>
          • 优点:可以在组件中传属性
          • 缺点:该组件没有路由属性
        • <Route path="/home" children ={()=><Home/>}></Route>
          • 既可以传属性,又有路由属性
      • 示例
        <Switch>
        	{/* 页面重定向*/}
           <Redirect from="/" to="/home" exact></Redirect>
           {/* 页面路由 */}
            <Route path="/home" component={Home}></Route>
            <Route path="/login" component={Login}></Route>
            {/* 下面是错误路由匹配404页面 */}
            <Route  component={NotFount}></Route>
        </Switch>
        
    • 使用代码如下
      //初始页面
      import React,{Component} from "react"
      import {Route,Switch,Redirect} from "react-router-dom"
      //引入路径
      import Home from "../pages/home"
      import Login from "../pages/login"
      import NotFount from "../pages/not_found"
      
      /**
       * Route是用来通过path路径来匹配对应路径的组件
       *  *path         路由路径
       *  *component    路由对应组件
       *  *render       可以渲染一个组件
       *  *children     子组件
       * !!component /  render / children  这三个先其中一个使用
       * 
       * Switch表示一次之渲染一次路由
       * Redirect重定向组件
       * !! exact 表示路径完全匹配
       */
      export default class Layout extends Component{
          render(){
              return(
                  <div>
                      <Switch>
                          <Redirect from="/" to="/home" exact></Redirect>
                          {/*<Route path="/home" component={Home}></Route>*/}
                          <Route path="/home" render ={()=>{<Home name={this}/>}></Route>
                          <Route path="/login" component={Login}></Route>
                          <Route  component={NotFount}></Route>
                      </Switch>
                  </div>
              )
          }
      }
      
二级路由

就是在对应的一级路由页面下写路由
代码
Home.jsx页面

<Route path="/home/hot" component={Home}></Route>
<Route path="/home/add" component={Home}></Route>
解决有些组件没有路由属性

当我们在在一个组件里想用路由属性时,给组件不是路由组件怎么办
这是我们就需用引入withRouter高阶组件
引入方式和使用如下

import { NavLink,Route,Switch,Redirect,withRouter } from 'react-router-dom'

//初始页面
import React,{Component} from "react"
import {Route,Switch,Redirect,withRouter } from "react-router-dom"
//引入路径
import Home from "../pages/home"
import Login from "../pages/login"
import NotFount from "../pages/not_found"


 class Layout extends Component{
    render(){
        return(
            <div>
                <Switch>
                    <Redirect from="/" to="/home" exact></Redirect>
                    {/*<Route path="/home" component={Home}></Route>*/}
                    <Route path="/home" render ={()=>{<Home name={this}/>}></Route>
                    <Route path="/login" component={Login}></Route>
                    <Route  component={NotFount}></Route>
                </Switch>
            </div>
        )
    }
}
export default withRouter(Layout)//用法
//这样Layout组件就有路由属性了

以上是路由配置

路由的使用(跳转)

路路由跳转使用需要从react-router-dom 中解构出NavLink
import { NavLink} from 'react-router-dom'

  • 具体使用
    <NavLink to = "/home" activeClassName = "active"> History products </NavLink>
NavLink属性参数
  • to(string):匹配路径
  • activeClassName(string):设置选中样式,默认值为active
  • activeStyle(object):当元素被选中时,为此元素添加样式
  • exact(bool):为true时,只有当导致和完全匹配class和style才会应用
  • strict(bool):为true时,在确定为位置是否与当前URL匹配时,将考虑位置pathname后的斜线
  • isActive(func)判断链接是否激活的额外逻辑的功能
// activeClassName选中时样式为selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>
 
// 选中时样式为activeStyle的样式设置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>
 
// 当event id为奇数的时候,激活链接
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
 
<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>
  • 传参
    to={{pathname:`/要跳转的路径`,state:{key:val}}
  • 在跳转页面接收
    this.props.location.state.key
js路由跳转

this.props.history.push('/child02')

query传参

this.props.history.push({pathname:"/home",query:{id:1,name:lisi}})

使用this.props.location.query接收参数

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐