React路由

React-Router-DOM

@1913
ReactRouter官网

安装

npm install react-router-dom
//或者
yarn add react-router-dom

基本使用方法

1.在index.js中引入BrowserRouter as Router(可以用ES6的as，给BrowserRouter起个别名)，要注意，BrowserRouter是基于h5(浏览器)的router，它不带#，但是存在的问题是一刷新，后端没有匹配的路由就会挂掉，所以需要后传那边做一个跳转。或者引入HashRouter，这个是路径带#，例如：

import {BrowserRouter as Router} from 'react-router-dom';//引入BrowserRouter起个别名:Router
import {HashRouter as Router} from 'react-router-dom';//引入HashRouter起个别名:Router
//注意这个引入一定要在index.js中引入，将app组件包裹起来，就像下面这行代码这样
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

2.Router就是定义路由的一个根组件，Route就是引入的react-router-dom，要注意Router里面只能有一个子节点，所以我们可以用Router将app包裹起来所有的Route包都可以用了，其实react路由很简单也很语义化：

<Route path="/about" component={About} />   //这样你就定义好了一个路由，当你路由为/about的时候就会跳到你的About组件

3.默认React的路由时有包容性，也就是比如说，/home/3和/home会同时匹配；若要实现路由的排他性，用Switch标签作为唯一的子节点；Switch标签有一个特点，在这里面的路由会从上往下进行匹配，Redirect可以实现路由的重定向在你输入/就可以进入home页一旦有一个匹配成功就不会再往下面匹配了，或者也可以在跳转路由的标签里写上一个exact，也可以实现精准匹配：

<Switch>
    <Route path='/home' component={Home}/>
    <Route path='/category' component={Category}/>
    <Route path='/shop' component={Shop}/>
    <Route path='/user' component={User}/>
    <Redirect from='/' to='/home' exact/>
    <Route component={NotFound}/>
</Switch>

4.你可以写一个，这个路由中不定义路由，也就是说这个路由将会作为如果你输入的路由不存在的时候走的组件

 <Route component={NotFound}/>

5.引入Link或者是NavLink标签，在这里就相当于a标签了，可以to到我们想跳转的路由

<NavLink to="/home">首页</NavLink>
<NavLink to="/classify">分类</NavLink>
<NavLink to="/cart">购物车</NavLink>
<NavLink to="/user">我的</NavLink>

6.react中的Link和NavLink的不同，Link是没有样式的，二NavLink是具备样式的（选中的颜色这个需要自己填）它选中有一个class名字是active，在css中只要点active就可以设置样式，

***如果你不想叫active想叫其它的名字可以通过activeClassName来设置你自己喜欢的名字，这里要提示的一点是通过activeClassName设置一级路由可以是同一名字，二级路由是一个名字以此类推，不同级别的路由可以设置不同的样式了，二NavLink自己的类名active不管你是哪一级的路由选中的样式都是一样的***