三、编程式导航和路由传参

官方文档

一、withRouter的使用

withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。

 <Route exact path="/Home" component={Home}/>

1. 只有包裹在Route组件里的才能使用this.props.location，
2. 假如有个需求，是面包屑或者导航组件里需要拿到this.props.location（导航组件或者面包屑一般不会包裹在Route里吧），那么直接这么写显然就不行了，这个时候withRouter修饰一下，就可以这么写了。

二、使用withRouter跳转页面

关于this.props.history
在 React 中正常来说只有在 包裹的组件中才能在 this.props 属性中找到 history 对象。但有些情况下我们就是希望在一个没被 包裹的组件中用到 history 对象，我们可以这样用

import { withRouter } from 'react-router-dom'
export default withRouter(YourComponent)
//此时就可以在组件中使用this.props.history跳转路由了
this.props.history.push({pathname:"/path/"});

三、路由传参

3-1 params方式传参

<Route path='/path/:name' component={Path}/>
<Link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

优势 ： 刷新地址栏，参数依然存在
缺点 : 只能传字符串，并且如果传的值太多的话，url会变得长而丑陋。

3-2 query方式传参

<Route path='/query' component={Query}/>
<Link to={{ pathname : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

优势：传参优雅，传递参数可传对象；
缺点：刷新地址栏，参数丢失

3-3 state方式传参

<Route path='/sort ' component={Sort}/>
<Link to={{ pathname : ' /sort ' , state : { name : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用: this.props.location.state.name

优势：传参优雅，传递参数可传对象，state传的参数是加密的
缺点：刷新地址栏，参数丢失

3-4 search方式传参

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search

优势 ： 刷新地址栏，参数依然存在
缺点 : 只能传字符串，并且如果传的值太多的话，url会变得长而丑陋。

四、组件懒加载

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。
如果在 MyComponent 渲染完成后，包含 OtherComponent 的模块还没有被加载完成，我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense 组件来解决。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
  <Router>
    //fallback 属性接受任何在组件加载过程中你想展示的 React 元素
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);