比较路由中有无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的更多相关文章

  1. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  2. 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  3. [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 ...

  4. (转) [it-ebooks]电子书列表

    [it-ebooks]电子书列表   [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...

  5. OpenFlow

    What is OpenFlow? OpenFlow is an open standard that enables researchers to run experimental protocol ...

  6. Java性能提示(全)

    http://www.onjava.com/pub/a/onjava/2001/05/30/optimization.htmlComparing the performance of LinkedLi ...

  7. Introduction to Computer Networks(网络架构与七层参考模式)

    Network Connectivity 1. Important terminologies 1) Link 设备连接的连线.Link本身既可以是有线的,也可以是无线的. 2) Node 设备.电脑 ...

  8. Learning Puppet — Resources and the RAL

    Learning Puppet — Resources and the RAL Welcome to Learning Puppet! This series covers the basics of ...

  9. 【安全组网】思科IOS设备基础应用

    思科IOS有2种主要命令行模式:用户模式与特权模式 1.用户模式(user mode),当用“>”表示实在用户模式下 2.特权模式(exec mode),当用"#"表示是在特 ...

随机推荐

  1. YII2 设置session过期时间

    设置session过期时间 如何在YII里设置SESSION过期时间,而不需要在php.ini里面设置. 在protected/config/main.php里,设置: 代码如下 复制代码 'comp ...

  2. phd文献阅读日志-博一下学期

    博一下学期: 1.week1,2018.2.26 2006-Extreme learning machine: theory and applications 期刊来源:Huang G B, Zhu ...

  3. linux环境下获取真实的ip地址

    package inas.test; import java.net.Inet6Address; import java.net.InetAddress; import java.net.Networ ...

  4. Nginx安装 默认虚拟主机 Nginx用户认证 Nginx域名重定向

    Nginx安装 cd /usr/local/src (http://nginx.org/en/download.html) wget http://nginx.org/download/nginx-1 ...

  5. Css 去除浮动

    清除浮动的方法 清除浮动方法大致有两类,一类是clear:both | left | right ,另一类则是创建BFC,细分又可以分为多种. 通过在浮动元素末尾添加一个空的标签例如并设置样式为cle ...

  6. 在Android中,px,dp,dip,sp的不同之处

           最近在学习Android开发,一直没有弄清楚px,dp,dip,sp的区别.今天正好有时间,就花时间研究了一下.     众所周知,Android厂商非常多,各种尺寸的Android手机 ...

  7. 理解IOC

    理解IOC 1 IoC理论的背景    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 ...

  8. nodejs的package.json

    package.json文件会描述这个NPM包的所有相关信息,包括作者.简介.包依赖.构建等信息,格式是严格的JSON格式 在E:/nodejs/mychat下 执行,npm init 输入yes,就 ...

  9. eclipse中断点不生效

    摘录自:http://blog.sina.com.cn/s/blog_496117520100kw6b.html Eclipse下Debug时弹出错误“Unable to install breakp ...

  10. logback.xml常用配置详解

    <?xml version="1.0" encoding="UTF-8"?><configuration debug="false& ...