react-route的使用

1. 安装react-route 使用npm install react-route-dom -S 或者使用yarn add react-route-dom,这里安装react-route一定要记住后面加dom.
2. react-route 有两种模式,一种是历史记录模式(BrowserRouter),另外一种是hash模式,历史记录模式在开发环境没有任何的问题,但是在项目上线之后用户刷新会出现404,这时候我们就需要后端配合我们设置重定向.逆战班 .然而hash模式没有这个问题,但是hash只有在地址栏上出现"#" .
3. 安装好之后 引入BrowserRouter或者HashRouter`

//因为单词太长,所以重命名 引入历史记录模式
import {BrowserRouter as Router} from 'react-router-dom'
//在项目的根组件上
<Router>跟组件<Router>

4. 在你需要用到react-router的组件上引入Route,Link或者NavLink,Switch,Redirect

import {Route,Link,Switch,Redirect} from 'react-router-dom'
//Link和NavLink的区别在于,NavLink可以添加样式
<Link to='/index'>index</Link> //点击去index页面
<Switch> //switch表示匹配路径只匹配第一个成功的
 	<Route path='/index' component={ 组件名} /> //路径是index显示后面component的组件内容
	<Redirect from='/' to='/index' exact /> //默认访问的是index exact是精准匹配到'/'
    <Route component={ NotFound } /> //设置路由不匹配的页面
</Switch>

5. 路由基本的使用过程大概是这样了, 如果成功的话点击index应该地址栏上会出现"/index"的.