router之switch
比较路由中有无switch的区别:
代码一:
<Router history={history}>
<Route exact path="/" component={Login}/>
<Route path="/home" component={Home}/>
</Router>
如果URL是"/", 那么<Home>将都被渲染,因为它们的path全都被匹配到
代码二:
<Router history={history}>
<Switch>
<Route exact path="/" component={Login}/>
<Route path="/home" component={Home}/>
</Switch>
</Router>
如果URL是"/",<Switch>将会开始寻找相匹配的<Login>。<Route path="/" />将会被匹配到,紧接着 <Switch>会停止继续匹配并且渲染<Home>。
总结:switch作用:
<Switch>是唯一的因为它仅仅只会渲染一个路径。
router之switch的更多相关文章
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- [React] Create a Query Parameter Modal Route with React Router
Routes are some times better served as a modal. If you have a modal (like a login modal) that needs ...
- (转) [it-ebooks]电子书列表
[it-ebooks]电子书列表 [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...
- OpenFlow
What is OpenFlow? OpenFlow is an open standard that enables researchers to run experimental protocol ...
- Java性能提示(全)
http://www.onjava.com/pub/a/onjava/2001/05/30/optimization.htmlComparing the performance of LinkedLi ...
- Introduction to Computer Networks(网络架构与七层参考模式)
Network Connectivity 1. Important terminologies 1) Link 设备连接的连线.Link本身既可以是有线的,也可以是无线的. 2) Node 设备.电脑 ...
- Learning Puppet — Resources and the RAL
Learning Puppet — Resources and the RAL Welcome to Learning Puppet! This series covers the basics of ...
- 【安全组网】思科IOS设备基础应用
思科IOS有2种主要命令行模式:用户模式与特权模式 1.用户模式(user mode),当用“>”表示实在用户模式下 2.特权模式(exec mode),当用"#"表示是在特 ...
随机推荐
- Xshell的常用命令
常用的命令: suse linux 常用命令 (1) 命令ls——列出文件 ls 显示当前目录文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的“隐藏”文件 ls a* 列出当 ...
- JSTL的if...else项目小试
最近在项目中有一个小的效果显示为:在前端,根据一个字段来判断是否弹出一个窗口. 具体需求为:单击表格中的课程名称链接,如果此课程已经被排课,那么就弹出排课窗口,如果未排课就弹出提示box. 具体的 ...
- Objective-C语法之NSPredicate的使用
正则表达式判断手机号码和电话号码的方法: #import <Foundation/Foundation.h> /** 正则判断手机号码地址格式 */ BOOL isMobileNumber ...
- npm安装包卡住不动的解决
最近诸事不顺,今天更新/安装nodejs各种包也全都卡在各个环节,用ie设了全局代理貌似也没什么改观,于是到网上找找有没有国内镜像站,倒是发现了cnpmjs.org这个网站被推荐比较多,看他们主页,他 ...
- Selenium Webdriver 的 PageObject 改造
PageObject中提供了一个@FindBy注解,也非常好用,但由于其是一次性全部初始化所有的WebElement,对于当前还不存在于页面上的Element在初始化时就会报错,为了解决这个问题,自然 ...
- JS判断设备类型跳转至PC端或移动端相应页面
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobil ...
- MongoDB 之 Capped Collection
MongoDB 支持 Capped Collection,一种固定大小的集合,当集合的大小达到指定大小时,新数据覆盖老数据,MongoDB Replica set 中的 oplog 就是 Capped ...
- Unity Shader-描边效果
原文链接:http://blog.csdn.net/puppet_master
- Bat注释符号
打开命令显示:echo on关闭命令显示:echo off, @ echo off, (加@表示连echo off都不显示,不然会显示出echo off的命令) rem : 注释, 表示不执行rem ...
- varchar和nvarchar的区别 数据来证明
如果一个数据是"N好"数据类型是varchar时: select len(vartest) from testselect datalength(vartest) from tex ...