共计 2091 个字符，预计需要花费 6 分钟才能阅读完成。
时隔那么久，博主终于从睡梦中醒来开始更新博客啦！为自己的勤劳欢呼 …(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 系列》也随着这篇的结束而告一段落了。在此感谢大家的关注，也很感谢自己能坚持写博文。大家一起加油！！！！最后再献上和本篇博文有关的代码链接和示例页面
