React-Router-DOM

ReactRouter网址，

安装

-npmjs找到react-router-dom
-yarn add react-router-dom

基本使用方法

1.创建一个文件夹react-router-dom，创建一个index.js文件

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

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

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

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

Switch写法：
    <Switch>
        <Route exact path="/" component={Food} />
        <Route path="/food" component={Food} />
        <Route path="/wiki" component={Wiki} />
        <Route path="/profile" component={Profile} />
        <Route exact component={Page404} />
    </Switch>
exact写法：
    <Route exact path="/" component={Food} />

5.你可以写一个

<Route exact component={Page404} />

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

<Link to="/profile">profile</Link>
    <Link to="/food">food</Link>
    <Link to="/wiki">wiki</Link>
    你会发现在浏览器上已经帮我们解析成a标签了

7.路由重定向

<Redirect from="/" exact to="/food" />

8.路由高亮，将Link标签改成NavLink标签(实现路由高亮的专用标签)，然后写上activeClass="active"就可以实现路由的高亮效果

<li>
        <NavLink activeClass="active" to="/profile">profile</NavLink>
    </li>
    <li>
        <NavLink activeClass="active" to="/food">food</NavLink>
    </li>
    <li>
        <NavLink activeClass="active" to="/wiki">wiki</NavLink>
    </li>

9.可以在路由组件中console.log(this.props)，你会发现有很多有用的东西

class Profile extends Component{
    render() {
        console.log(this.props)
        return (
            <div>Profile</div>
        )
    }
}

这篇是关于React路由的基础知识，希望能对想学习React的同学有所帮助，后续会给大家发一个React路由进阶