react路由v5

react 路由5

• 1.安装路由

npm install react-router-dom@5

• 2.路由使用

  import React from "react";
  import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

• 3.路由方法解释

  • 路由模式两种： HashRouter 和 BrowserRouter
Redirect： 创建一个组件，只要组件被挂载或更新时，就会执行重定向。注意，这个组件内部是不进行路由匹配的，Redirect本身是不进行路由匹配的，所以需要依赖Switch的路由匹配逻辑。也就是说，使用Redirect时必须使用Switch作为父节点。

    Switch： Switch的作用是循环遍历子节点childrens数组，依次和当前路由进行匹配，只要匹配到就结束循环，返回匹配到的路由。Switch进行路由匹配时，遍历的子节点只是一级子节点，并不会去遍历孙节点。所以，Route、Redirect只能作为Switch的一级子节点，如果有嵌套路由，每级路由都需要加上Switch

• 4.定义路由

// router.js
  <HashRouter>
    <Switch>
      <Route path="/falimy" component={Falimy} />
      <Route path="/father" component={Father} />
      <Route path="/children"component={Children} />
      <Redirect from="/" to="/center" />  //重定向
    </Switch>
  </HashRouter>

• 5.嵌套路由

// children组件
<Switch>
    <Route path="/children/xiaoming" component={ XiaoMing } />
    <Route path="/children/xiaohong" component={ XiaoHong } />
    <Redirect from="/children" to="/children/xiaohong" /> 
</Switch>

• 6.路由跳转 + 传参
  • 声明式导航

    <NavLink to={{pathname:`/children/${this.state.money}/${this.state.car}`}}>children</NavLink>
    

  • 编程式导航

    1.params传参
    this.props.router.push({pathname:`/children/${this.state.money}/${this.state.car}`});
    		
    2.query传参
    this.props.router.push({pathname:`/children`,query:{money:100,car:"小汽车"}});
    

• 7.其他传参方式
  • 路由里直接传

    <Route pathname="/children/xiaoming/:id/:name" component={XiaoMing}/>
    

  • state传参（适合声明式导航和编程式导航，无需在路由配置）

    1. <NavLink to={{pathname:"/children", query:{money:100,car:"小汽车"} }}>children</NavLink>
    
    2. this.props.router.push({pathname:'/production',state:{money:100,car:"小汽车"}});