1.安装路由
cnpm install react-router@5 // 指定版本
2.index.js中引入路由
import { BrowserRouter} from 'react-router-dom'
// 通过包裹App组件使所有的路由由一个路由器管理
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
document.getElementById('root')
);
3.简单使用
import {Link,Route} from 'react-router-dom'
import About from './components/About'
import Home from './components/Home'
// 1.定义路由跳转的path
<Link className="list-group-item" to="/about">about</Link>
<Link className="list-group-item" to="/home">home</Link>
// 2. 根据当前的history路由信息展示对应组件
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
4.Switch,Redirect 的使用
// switch可以提高路由匹配效率（单一匹配） exact 开启严格匹配
<Switch>
<Route exact path="/about" component={About} />
<Route path="/home" component={Home} />
<Route path="/home" component={Home} /> // 不会渲染
<Redirect to="/about"/> // 当所有的路由都没有匹配的时候，渲染重定向的路由
</Switch>
5.嵌套路由
嵌套路由需要在前方加上自身父级的路由path，才能从上到下进行匹配（父级路由不能开启严格模式，不然会导致匹配失败！！）
image.png
6.向路由组件传递search参数
// 通过拼接的方式
<Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>{item.title}</Link>
// 路由正常渲染即可
<Route path="/home/message/detail" component={Detail}></Route>
// 接收 1. 引入qs 2.转换成对象
import qs from 'qs'
const { id, title } = qs.parse(this.props.location.search.slice(1))
<li>ID:{id}</li>
<li>TITLE:{title}</li>
<li>CONTENT:{fileterObj.content}</li>
7.携带state参数
// 通过对象的形式定义要传递的值
<Link to={{pathname:"/home/message/detail",state:{id:item.id,title:item.title}}}>{item.title}</Link>
<Route path="/home/message/detail" component={Detail}></Route>
// 接收
const { id,title } = this.props.location.state || {}
