React的路由

路由模式：

1. hashRouter模式（带有#，刷新页面不丢失）
2. browserRouter模式（历史记录模式，不带#，是通过历史记录API进行切换的，刷新会丢失，本地不会丢失）

路由安装

cnpm i react-router-dom --save

index.js引入路由模块，以BrowserRouter为例

import {BrowserRouter} from 'react-router-dom'

// 需要对跟组件进行包裹
ReactDOM.render(<BrowserRouter><APP /></BrowserRouter>,document.getElementById('root'));

hashRouter类似，更换引入为HashRouter即可。

路由跳转
通过react-router-dom的Link标签或这NavLink标签进行跳转。
某页面下的代码：

import {Route,Link，NavLink} from 'react-router-dom'
// 推荐使用NavLink，因为它有选中后的active的class
<Link to='/home'></Link>
<NavLink to='/project'></NavLink>
<Route path='/home' component={Home}/>
<Route path='/project' component={Project}/>

精准匹配

在Route标签上加入属性exact，可实现精准匹配

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

Switch避免重复路由

import {Route,Link，NavLink,Switch} from 'react-router-dom'
// 这里会重复出现Project
<Route path='/project' component={Project}/>
<Route path='/project' component={Project}/>
// 嵌套Switch后指挥出现一个Project
<Switch>
	<Route path='/project' component={Project}/>
	<Route path='/project' component={Project}/>
</Switch>

Redirect重定向

import {Route,Link，NavLink,Switch,Redirect} from 'react-router-dom'
// 这里会重复出现Project
<Route path='/project' component={Project}/>
<Route path='/project' component={Project}/>
// 嵌套Switch后指挥出现一个Project
<Switch>
	<Route path='/home' component={Home}/>
	<Route path='/project' component={Project}/>
	<Route path='/project' component={Project}/>
	<Redirect from='/' to='/home' />
</Switch>