看完Router的变化,接着来说<Switch>组件。

在3.X中,你可以指定很多子路由,但是只有第一个匹配的路径才会被渲染。

就像这样,

<Route path='/' component={App}>
<IndexRoute component={Home} />
<Route path='about' component={About} />
<Route path='contact' component={Contact} />
</Route>

4.X中提供了一个相似的方法用来代替<IndexRoute>,就是<Switch>组件,当一个<Switch>组件被渲染时,react只会渲染Switch下与当前路径匹配的第一个子<Route>

就像这样,

<Route path="/" render={()=>
<Admin>
<Switch>
<Route path='/home' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/contact' component={Contact} />
</Switch>
</Admin>
} />

  正如你所理解的意思一样,switch就同我们代码中使用的一样,当匹配到一个值之后,即不再继续匹配,具有break的作用。因此,如果我们需要严格匹配,就需要在Route上加上exatc属性。

但是要注意,如果你的组件如例子中使用了嵌套,那么外层路由就不可以加exatc了。

笔记react router 4(四)的更多相关文章

  1. 笔记react router 4(二)

    上一篇我们提到react router 4的dom特性.那么这一次,我们来说一说4.X中的路由组件嵌套. 用过3.X的同学应该知道,路由组件的嵌套(即,路由的配置)方式是通过给<Route> ...

  2. 笔记react router 4(五)

    或许,你觉得我麻烦,明明一篇文章可以搞定的内容,非要写几篇.是不是正在吐槽我?没关系,我的目的达到了.手动傲娇( ̄∇ ̄) 然后,我们就要来聊一聊withRouter了. 我们都知道,当我在访问路由配置 ...

  3. 笔记react router 4(三)

    上一篇我们说到了路由组件的嵌套.想必你已经运用自如了.那么,这一次我们来聊一聊4.X中Router的变更. 在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可. 例如, ...

  4. 笔记react router 4(一)

    用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变. 首先,我们只需要安装 react-router-dom 即可使用.看到“dom”想必你就该知 ...

  5. React躬行记(13)——React Router

    在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...

  6. React初识整理(四)--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  7. React Router学习笔记(转自阮一峰老师博客)

    React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...

  8. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  9. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

随机推荐

  1. 【ASP.NET】System.Web.Routing - HttpMethodConstraint Class

    你可以自己定义你的ASP.NET程序接收的get post put 或者delete请求. 使用这个约束的方式为: void Application_Start(object sender, Even ...

  2. 51nod1057-N的阶乘(大数乘法巧解)

    这道大数乘法开始我是想套板子模拟的..然后就发现2/3的例子都wa了.(惊了).然后在思考后发现n2的板子的确过不了这么多的大数.(不看题的下场).所以,我在网上发现了分块求大数的方法.%%% 思路来 ...

  3. sed命令使用详解

        内容来自马哥视频,感谢马哥精彩讲解 sed:编辑器 sed: Stream EDitor, 行编辑器,逐行进行处理 grep:实现文本过滤 awk:文本报告生成器 sed默认不编辑源文件,而是 ...

  4. Tomcat的manager app管理web项目

    1.在浏览器地址栏输入http://localhost:8080/进入,如下图所示: 2.在点击Manager App 前,首次使用则需要对tomcat目录下的conf/tomcat-users.xm ...

  5. 理解 Redis(6) - List 值

    list 值就是一组根据插入顺序排列的字符串, 从左向右排列, 左边为头(head), 右侧为尾(tail). 左边为顶部, 右边为底部. 下图为 list 值的示意图: 从左侧开始向键为 num 的 ...

  6. _pvp_gap_aura

    该表可以用于控制区域内平衡,举个例子,当一个区域内超过limitHP的LM玩家个数为10,部落玩家个数为8,则阵营人数差为2,人数少的部落,所有部落玩家获得2层aura光环 zone 区域ID aur ...

  7. mysql Percona-XtraBackup backup

    全量备份FULL BACKUP https://www.percona.com/doc/percona-xtrabackup/2.4/backup_scenarios/full_backup.html ...

  8. ege demo

    #include <ege.h> const float base_speed = 0.5f; const float randspeed = 1.5f; //自定义函数,用来返回一个0 ...

  9. Ajax请求导出Excel的问题

    文章转载自: http://yuwenlin.iteye.com/blog/2275289 Ajax请求导出Excel的问题描述: 前端发起Ajax请求get或post,后台使用Poi生成excel文 ...

  10. shell和shell脚本基本知识

    详情可见: https://www.cnblogs.com/yinheyi/p/6648242.html 这张图,可以帮助我们理解这个词语! 最底下是计算机硬件,然后硬件被系统核心包住,在系统核心外层 ...