[ 一起学React系列 -- 12 ] React-Router4 (2)

时隔那么久，博主终于从睡梦中醒来开始更新博客啦！为自己的勤劳欢呼...(pia pia pia打脸)！

本次我们接着上一篇博客继续聊React-Router4。上篇我们主要了解了React-Router4常用组件以及常用的路由类型，本次我们接着说“嵌套路由”和“验证路由”。

嵌套路由

顾名思义，嵌套路由其实就是在某个路由的末端再接上一个包含路由的组件，这样就形成了嵌套路由。最直接的说，本片博客的例子代码结构就是嵌套路由。形象化一点，我们可以将项目中的一整套路由想象成一棵树，树根是root路由，向上就是一些分叉的树枝(子路由)，分叉的树枝再顺着向上找还会有更多的分叉，这样就是“嵌套”。说的再多没有一个图来得清楚！

从根 /A 到中间一段 /A/B ，再到末端(叶子节点) /A/B/C 。这就是嵌套路由相对合理的解释了。

这里我们看下部分有代表性的代码：

...
<li><NavLink exact activeStyle={{ fontWeight: 'bold', color: 'red' }} to={`${URL}/Fronted`}>/Fronted</NavLink></li>
<li><NavLink activeStyle={{ fontWeight: 'bold', color: 'red' }} to={`${URL}/Fronted/WebPack`}>/Fronted/WebPack</NavLink></li>
...

<Route path={`${PATH}/Fronted`} component={() => <Technology path={PATH} />} />
...

可以看出 ${URL}/Fronted 对应的组件是 Technology 。再看下 Technology 的代码：

class Technology extends Component {
    render() {
        const PATH = this.props.path;
        return (
            <Switch>
                <Route path={`${PATH}/Fronted/:name`} component={Name} />
                <Route path={`${PATH}/Fronted`} component={Fronted} />
            </Switch>
        )
    }
}

可以看出Technology组件中也包含了一层路由。上篇中博主有说过，不要在非末端路由使用 exact ，相当于示例图中的 /A/B ，一旦在这个路由 <Route/> 中使用了exact，那么匹配路由的时候一旦到了该出路由后就不会寻找到 /A/B/C ，因为已经 被exact “截断” 了。

验证路由

所谓的验证路由其实就是该路由的外层加了一层验证机制，有授权的用户才能进入，反之都无法进入。验证路由实现起来也很简单，其实就是对某一个用来做验证的参数进行校验，例子中有具体的代码实现。什么？这就结束了？当然不是，与其把验证路由的实现方法说一遍不如将 withRouter 这个方法普及下，授人以鱼不如授人以渔。

withRouter

从名字可以看出这个方法其实和 Router 有关。废话，本篇不就是在说Router吗？好吧！说的也是。

但是我们得换个角度去看，它到底和Router有什么样的关系呢？先一起回想一下，如果想获得 history , location , match 这三个对象？如何去做？认真看例子代码的盆友肯定会注意到，只有在 <Route/> 中跳转到的组件才能在props中获取到这三个对象。

<Route path={`${PATH}/Fronted`} component={Fronted} />

class Fronted extends Component {
    render() {
        console.log(this.props);
        return (
            <h1>Fronted</h1>
        )
    }
}

打印出来的结果

但如果不这样做该用哪种方式去获得这三个对象呢？那就轮到 withRouter 大展身手了。放码过来了

const AuthButton = withRouter(
    ({ history }) =>
        AuthTool.isAuthenticated ? (
            <div>
                Welcome!{" "}
                <button
                    onClick={() => {
                        AuthTool.logout(() => history.push("/auth/Auth/Login"));  //登出后跳转到登录页面
                    }}
                >
                    Logout
                </button>
            </div>
        ) : (
                <div>
                    You are not logged in!
                <button
                        onClick={() => {
                            AuthTool.login(() => history.push("/auth/Auth")); //登出后跳转到实际页面
                        }}
                    >
                        Login
                </button>
                </div>
            )
);

withRouter接受一个方法或者任何一个自定义的组件。这样就可以获得我们需要的跟路由有关的对象了。

本篇篇幅不是很长，但介绍的方法着实很有实用的啊。

emmmmm...《一起学React系列》也随着这篇的结束而告一段落了。在此感谢大家的关注，也很感谢自己能坚持写博文。大家一起加油！！！！

最后再献上和本篇博文有关的 代码链接 和 示例页面