1). 安装
npm install react-router --save
2). 定义各个路由组件
- index.js注册路由
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), document.getElementById('root'));
-
在组件中使用路由
1、先引入需要用到的路由组件
import {NavLink, Switch, Route, Redirect} from 'react-router-dom'
2、添加路由链接
可以使用Link或者NavLink,区别是NavLink有个active的状态类名，可以通过activeClassName来设置其样式，如下代码直接在css文件中设置selected的样式即可（to后面是要展示的路由地址）
<ul>
<li>
<NavLink to='/home/news' activeClassName="selected">news</NavLink>
</li>
<li>
<NavLink to='/home/message' activeClassName="selected">message</NavLink>
</li>
</ul>
3、路由组件展示
如果只有一个组件要展示直接写一个<Route>标签进行展示即可,Route需要设置两个属性，path和component，path是设置路由地址，component是相对应要展示的组件
<Route path='/home/news' component={News}></Route>
如果有多个组件根据点击相应的路由展示，就需要用到Switch组件进行判断，这里多数情况下需要指定一个默认路由地址（如果未匹配到任何可用的路由地址就使用这个地址进行展示），使用Redirect（重定向）组件，Redirect和Route一样需要设置路由地址和相对应的组件，不同的是它的地址需要使用to属性来设置
<Switch>
<Route path='/home/news' component={News}></Route>
<Route path='/home/message' component={Message}></Route>
<Redirect to='/home/news' component={News} />
</Switch>
3).路由传参
路由传参就是在Route组件指定path的时候，path不是固定的是根据某个值变化，所以需要传个参数，这个参数写在冒号后面，参数名可以自己定义，参数值可以在props.match.params中找到,下面代码中的id为所传参数
<Route path='/home/message/messagedetail/:id' component={MsgDetail} />
4).操作路由历史记录history
history对象可以在props里面查看,history有几个方法比较常用，分别是
1.push添加一条历史记录
this.props.history.push(`/home/message/messagedetail/1`)
2.替换一条历史记录，替换的方法会在历史记录中删除当前所在路由的历史记录换成跳转的
this.props.history.replace(`/home/about`)
3.前进
this.props.history.goForward()
4.后退
this.props.history.goBack()
