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

chaos_G 发布于2019-08-26 13:34 / 3268人阅读

摘要：验证路由所谓的验证路由其实就是该路由的外层加了一层验证机制，有授权的用户才能进入，反之都无法进入。一起学系列也随着这篇的结束而告一段落了。大家一起加油最后再献上和本篇博文有关的代码链接和示例页面

时隔那么久，博主终于从睡梦中醒来开始更新博客啦！为自己的勤劳欢呼...(pia pia pia打脸)！
本次我们接着上一篇博客继续聊React-Router4。上篇我们主要了解了React-Router4常用组件以及常用的路由类型，本次我们接着说“嵌套路由”和“验证路由”。

嵌套路由

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

从根/A到中间一段/A/B，再到末端(叶子节点)/A/B/C。这就是嵌套路由相对合理的解释了。
这里我们看下部分有代表性的代码：

...
/Fronted
/Fronted/WebPack
...

 } />
...

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

class Technology extends Component {
    render() {
        const PATH = this.props.path;
        return (
            
                
                
            
        )
    }
}

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

验证路由

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

withRouter

从名字可以看出这个方法其实和Router有关。废话，本篇不就是在说Router吗？好吧！说的也是。
但是我们得换个角度去看，它到底和Router有什么样的关系呢？先一起回想一下，如果想获得history,location,match这三个对象？如何去做？认真看例子代码的盆友肯定会注意到，只有在中跳转到的组件才能在props中获取到这三个对象。



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

打印出来的结果

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

const AuthButton = withRouter(
    ({ history }) =>
        AuthTool.isAuthenticated ? (
            
                Welcome!{" "}
                
            
        ) : (
                
                    You are not logged in!
                
                
            )
);

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

本篇篇幅不是很长，但介绍的方法着实很有实用的啊。
emmmmm...《一起学React系列》也随着这篇的结束而告一段落了。在此感谢大家的关注，也很感谢自己能坚持写博文。大家一起加油！！！！
最后再献上和本篇博文有关的代码链接和示例页面

GPU云服务器云服务器 react-router4 react-router 系列4 一起学linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109056.html

[ 一起学React系列 -- 11 ] React-Router4 (1)

摘要：中的包中的包主要有三个和。的理念上面提到的理念是一切皆组件以下统一称组件。从这点来说的确方便了不少，也迎合一切皆组件的理念。组件是中主要的组成单位，可以认为是或的路由入口。将该标示为严格匹配路由。的属性追加一条。 2019年不知不觉已经过去19天了，有没有给自己做个总结？有没有给明年做个计划？当然笔者已经做好了明年的工作、学习计划；同时也包括该系列博客剩下的博文计划，目前还剩4篇：分别...

tinysun1234 2019-08-23 14:49 评论0 收藏0
前端学习资源整理

稍微整理了一下自己平时看到的前端学习资源，分享给大家。 html MDN：Mozilla开发者网络 SEO：前端开发中的SEO css 张鑫旭：张鑫旭的博客 css精灵图：css精灵图实践栅格系统：详解CSS中的栅格系统媒体查询：css媒体查询用法 rem布局：手机端页面自适应布局移动前端开发之viewport的深入理解:深入理解viewport 淘宝前端布局：手机淘宝移动端布局 fl...

siberiawolf 2019-08-21 11:27 评论0 收藏0
前端综合性文档和教程总结（持续更新）

摘要：小弟在前端摸爬滚打一段时间，发现前端的比较好的文档比较分散，特别是中文的，我平时都是收藏在浏览器里，以后有好的教程和综合性的文档我会更新到这里。小组中文文档，很全。小弟在前端摸爬滚打一段时间，发现前端的比较好的文档比较分散，特别是中文的，我平时都是ctrl+D收藏在浏览器里，以后有好的教程和综合性的文档我会更新到这里。一则可以做个记录，防止丢失。二则有需要的朋友可以来我这里找一找。 ...

piglei 2019-08-20 10:19 评论0 收藏0
React 可视化开发工具 Shadow Widget 非正经入门（之一：React 三宗罪）

摘要：前言非正经入门是相对正经入门而言的。不过不要紧，正式学习仍需回到正经入门的方式。快速入门建议先学会用拼文写文档注册一个账号，把库到自己名下，然后用这个库写自己的博客，参见这份介绍。会用拼文写文章，相当于开发已入门三分之一了。本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点，既作为用户手册的补充，也从更本质角度帮助大家理解 Shadow Widget 为什么这...

dongxiawu 2019-08-21 11:43 评论0 收藏0