笔记react router 4(四)
看完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(四)的更多相关文章
- 笔记react router 4(二)
上一篇我们提到react router 4的dom特性.那么这一次,我们来说一说4.X中的路由组件嵌套. 用过3.X的同学应该知道,路由组件的嵌套(即,路由的配置)方式是通过给<Route> ...
- 笔记react router 4(五)
或许,你觉得我麻烦,明明一篇文章可以搞定的内容,非要写几篇.是不是正在吐槽我?没关系,我的目的达到了.手动傲娇( ̄∇ ̄) 然后,我们就要来聊一聊withRouter了. 我们都知道,当我在访问路由配置 ...
- 笔记react router 4(三)
上一篇我们说到了路由组件的嵌套.想必你已经运用自如了.那么,这一次我们来聊一聊4.X中Router的变更. 在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可. 例如, ...
- 笔记react router 4(一)
用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变. 首先,我们只需要安装 react-router-dom 即可使用.看到“dom”想必你就该知 ...
- React躬行记(13)——React Router
在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...
- React初识整理(四)--React Router(路由)
官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...
- React Router学习笔记(转自阮一峰老师博客)
React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
随机推荐
- ie 支持字体大小继承
今天需要实现字体大小继承这个效果.是这样的,在公用类里 .box 中的 .box1 的字体进行了修改.但是我的页面里不需要修改.我需要让他和 .box 一样.所以想到使用继承.但是想到继承这个属性兼容 ...
- python学习之re库
正则表达式库re是非常重要的一个库. 首先正则表达式有两种表示类型,一种是raw string类型(原生字符串类型),也就是我们经常看到的r' '的写法,另一种是不带r的写法,称为string类型. ...
- MySQL GROUP BY语句
GROUP BY 语句根据一个或多个列对结果集进行分组 在分组的列上我们可以使用COUNT.SUM.AVG等函数 SELECT column_name,function(column_name) FR ...
- chrome浏览器的SwitchyOmega插件使用方法
对于有某些特殊需求的人来讲,应该对这个插件不陌生,但是很多人不了解这插件的工作原理,百度的老教程又很烂,在刚开始用的时候我也不知道怎么办,去百度搜出来的教程基本都是让下载个规则文件让你去导入,但一般这 ...
- SPOJ QTREE Query on a tree 树链剖分+线段树
题目链接:http://www.spoj.com/problems/QTREE/en/ QTREE - Query on a tree #tree You are given a tree (an a ...
- 再谈java编码
一篇好文:从原理上搞懂编码——究竟什么是编码?什么是解码?什么是字节流? encode,即把字符按照指定的<编码gbk utf-8等>编码成该<编码>所表示的字节 decode ...
- python 操作记事本
需事先打开记事本,再运行下面脚本 # encoding: utf- import win32api import win32gui import win32con print("Hello, ...
- Python3入门 Python3+Selenium做UI页面测试的学习
https://ke.qq.com/course/310732 一直计划着系统地看看Python3,这两天不用加班了,在网上下了些资源,自己演练一番. Python3标识符保留字,直接命令行中可以查看 ...
- Java String删除字符串中间的某部分
当你想删除字符串中的某部分时,java中并没有直接提供相关的方法,比如想删除 "cout<<\"Hello world\"<<endl" ...
- IPC 之 ContentProvider 的使用
一.概述 ContentProvider 是 Android 中提供的专门用于不同应用间进行数据共享的方式.和 Messenger 一样,ContentProvider 的底层实现同样也是 Binde ...