比较路由中有无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. R语言colorRampPalette函数-创建颜色梯度(渐变色)

    在绘热图时,需要将数值映射到不同的颜色上,这时就需要一系列的颜色梯度 colorRampPalette 函数支持自定义的创建一系列的颜色梯度 代码示例: > colors <- color ...

  2. C# 获取本机的所有ip地址,并过滤内网ip

    private void Initialization_Load(object sender, EventArgs e) { cboxip.Items.Add("请选择IP地址") ...

  3. YII2 设置session过期时间

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

  4. js pjax 和window.history.pushState,replaceState

    原文:http://blog.linjunhalida.com/blog/pjax/ github:https://github.com/defunkt/jquery-pjax 什么是pjax? 现在 ...

  5. Android上基于libgdx的游戏开发资料

    本来之前想边学边写一个有关libgdx的游戏开发历程的,但是由于自己的懒惰和客观上的各种事情,一直没有搞下去.最近发现了一个大牛写的一本书<Beginning Android Games, 2n ...

  6. LR URL编码和解码方法

    问题:URL=http://www.baidu.com/s?wd=%E6%B5%B7%E6%B7%80%E9%BB%84%E5%BA%84"中要对%E6%B5%B7%E6%B7%80%E9% ...

  7. TV和BTV(全变分和双边全变分)

    TV:Total Variation BTV:Bilateral Total Variation Osher等在1992 年提出了总变分(TV)超分辨率重建方法,该方法能够有效地去除噪声和消除模糊,但 ...

  8. JS匿名函数理解

    匿名函数的基本形式为(function(){...})(); 前面的括号包含函数体,后面的括号就是给匿名函数传递参数并立即执行之 匿名函数的作用是避免全局变量的污染以及函数名的冲突   1.小括号的作 ...

  9. Java NIO原理 图文分析及代码实现

    Java NIO原理图文分析及代码实现 前言:  最近在分析hadoop的RPC(Remote Procedure Call Protocol ,远程过程调用协议,它是一种通过网络从远程计算机程序上请 ...

  10. JavaScript之 for...in

    for-in 可以用来枚举对象的属性,还有数组的索引,用法: 枚举对象属性 var o={name:'a',age:25,sex:'male'} for(var each in o){ console ...