react路由

import { BrowserRouter, Route } from "react-router-dom";

 <BrowserRouter>
    <Route path="/" component={App}/>  
    <Route path="/About" component={About}/>  
    <Route path="/Inbox" component={Inbox}/>  
  </BrowserRouter>,
  document.getElementById('root')

二级路由

<BrowserRouter>
	<Link to='/gla/Pencil' >铅笔</Link> &nbsp;|&nbsp;
	<Link to='/gla/Eraser' >橡皮</Link>
	<hr/>
	<Route path='/gla/Pencil' component={Pencil} />
	<Route path='/gla/Eraser' component={Eraser} />
</BrowserRouter>

路由跳转

声明式导航：
<NavLink to={'/Inbox'} >铅笔</NavLink>
编程式导航：
this.props.history.push( '/Inbox' )

路由传参

params**

​	  **路由配置：**           
<Route path='/Inbox/:id' component={Inbox} />

​ 路由跳转（传值）：

声明式导航：
<NavLink to={'/Inbox/'+'01008'} >铅笔</NavLink>
编程式导航：
this.props.history.push( '/Inbox/'+'01008' )

​ 取值：

this.props.match.params.id

query**

   **路由配置：**

​    不用改变路由配置表。

```

​ 路由跳转（传值）：

声明式导航：
<Link to={{pathname:'/Inbox',query:{id:'01009'}}} >铅笔</Link>
编程式导航：
this.props.history.push( {pathname:'/Inbox',query:{id:'01009'}} )

取值：

this.props.location.query.id

state**

​        同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，只需要把query改为state即可。

  **路由配置：**

​    不用改变路由配置表。

```

​ 路由跳转（传值）：

声明式导航
<Link to={{pathname:'/Inbox',state:{id:'01009'}}} >铅笔</Link>
编程式导航
this.props.history.push({pathname:'/Inbox',state:{id:"01"}});

取值：

this.props.location.state.id