比较路由中有无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. C# POST数据base64到接口会出错的问题

    这个base64在requestHeader里面变成了base64=hySGNg22yX0AIjNQvNJw0xHEbi32NH%2BiRVKDkbOmUiKpxW0%2FS6rUgfLmSa527Y ...

  2. flask with gae开发小结

    最近因为要重写之前发布在GAE上的一个博客,又回顾了一下python,同时,因为用的flask,gae等等,一道写一些小总结,供日后查阅. 1, slugify 其实这个问题可以不考虑,只要你愿意用中 ...

  3. TensorFlow安装,升级,基本操作

    一. 安装 ubuntu 16 python 2.7 pip install tensorflow 测试安装完成效果: 查看tensorFlow版本python import tensorflow a ...

  4. lua 时间戳和时间互相转换

    1.时间戳转换成时间 local t = 1412753621000 function getTimeStamp(t)     return os.date("%Y%m%d%H", ...

  5. ABBYY FineReader 12没你想得那么简单

    你是否觉得自己对ABBYY FineReader 12已经了如指掌了?也许你会认为它不过就是一款OCR文字识别软件,能够快速方便地将扫描纸质文档.PDF文件或者数码相机的图像转换为可编辑.可搜索的格式 ...

  6. NetBpm Q&A(7)

    原文:NetBPM工作流的一个示例:请假审批 前言 在NetBPM的实践与应用中,大家一定会遇到各种各样的问题,笔者特建此帖, 聚集了一些典型问题,并作了初步解答.本帖将不断更新,大家有什么问题,可以 ...

  7. flexbox子盒子flex属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. iOS .tdb代替.dylib

    原文链接:http://www.meniny.cn/2015/09/22/00-00-01-iOS_Xcode_7_tbd/ 不少升级 Xcode 7 的小伙伴们都表示在引入动态库时惊呆了,因为熟悉的 ...

  9. 【GIS】Cesium回到初始位置

      var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100), 15 ...

  10. zabbix的源码安装

    前提:安装好lnmp环境,参考: 搭建LNMP环境   下载软件包 1. 下载并解压安装包 cd /usr/local/src wget https://ncu.dl.sourceforge.net/ ...