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),当用"#"表示是在特 ...
随机推荐
- YII2 设置session过期时间
设置session过期时间 如何在YII里设置SESSION过期时间,而不需要在php.ini里面设置. 在protected/config/main.php里,设置: 代码如下 复制代码 'comp ...
- phd文献阅读日志-博一下学期
博一下学期: 1.week1,2018.2.26 2006-Extreme learning machine: theory and applications 期刊来源:Huang G B, Zhu ...
- linux环境下获取真实的ip地址
package inas.test; import java.net.Inet6Address; import java.net.InetAddress; import java.net.Networ ...
- Nginx安装 默认虚拟主机 Nginx用户认证 Nginx域名重定向
Nginx安装 cd /usr/local/src (http://nginx.org/en/download.html) wget http://nginx.org/download/nginx-1 ...
- Css 去除浮动
清除浮动的方法 清除浮动方法大致有两类,一类是clear:both | left | right ,另一类则是创建BFC,细分又可以分为多种. 通过在浮动元素末尾添加一个空的标签例如并设置样式为cle ...
- 在Android中,px,dp,dip,sp的不同之处
最近在学习Android开发,一直没有弄清楚px,dp,dip,sp的区别.今天正好有时间,就花时间研究了一下. 众所周知,Android厂商非常多,各种尺寸的Android手机 ...
- 理解IOC
理解IOC 1 IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 ...
- nodejs的package.json
package.json文件会描述这个NPM包的所有相关信息,包括作者.简介.包依赖.构建等信息,格式是严格的JSON格式 在E:/nodejs/mychat下 执行,npm init 输入yes,就 ...
- eclipse中断点不生效
摘录自:http://blog.sina.com.cn/s/blog_496117520100kw6b.html Eclipse下Debug时弹出错误“Unable to install breakp ...
- logback.xml常用配置详解
<?xml version="1.0" encoding="UTF-8"?><configuration debug="false& ...