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