React路由-基础篇

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.路由重定向，当路由匹配了/后会跳转到/food路由，注意在这里要加上exact，意为精准匹配

<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路由进阶