比较路由中有无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. alter system set events相关知识

    格式:alter system|session set events ‘[eventnumber|immediate] trace name eventname [forever] [, level ...

  2. C# winform右击导入手机号码

    private void 导入手机号ToolStripMenuItem_Click(object sender, EventArgs e) { using (OpenFileDialog Openfi ...

  3. unity3d 读取usb摄像头

    using UnityEngine; using System.Collections; public class C : MonoBehaviour { private WebCamTexture ...

  4. 代码记录——phase16,block32

    HRESULT RotateZoom(PBYTE pbSrc,int iWidth,int iHeight,double dbRotate,double dbZoom,PBYTE pbTag) { / ...

  5. css 中的相对定位和绝对定位

    1.默认不写position的话,值为static. 2.相对定位:相对于元素自己本身的位置偏移,虽然位置偏移,但元素本身占据的空间并不释放. 3.绝对定位:相对于离它最近的,position不为st ...

  6. Python 常用类库

    python除了关键字(keywords)和内置的类型和函数(builtins),更多的功能是通过libraries(即modules)来提供的. 常用的libraries(modules)如下: 1 ...

  7. Fiddler 抓取 Genymotion 数据包

    对genymotion进行如下设置

  8. win10屏幕投影

    不管是做设计还是看电影玩游戏编代码,多屏幕总是可以带来方便的.屏幕投影之前需要连接屏幕:通过VGA线连接.通过HDMI线连接.或者通过无线连接. 介绍Win10实现屏幕投影设置:https://jin ...

  9. mysql的wait_timeout配置(此处处理方法是有问题的,不建议作为操作参考)

    mysql数据库有一个wait_timeout的配置,默认值为28800(即8小时). 在默认配置不改变的情况下,如果连续8小时内都没有访问数据库的操作,再次访问mysql数据库的时候,mysql数据 ...

  10. Mybatis整合通用Dao,Mybatis整合通用Mapper,MyBatis3.x整合通用 Mapper3.5.x

    Mybatis整合通用Dao,Mybatis整合通用Mapper,MyBatis3.x整合通用 Mapper3.5.x ============================== 蕃薯耀 2018年 ...