比较路由中有无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# 通过调用Win32 API函数清除浏览器缓存和cookie

    public enum ShowCommands : int { SW_HIDE = , SW_SHOWNOrmAL = , SW_NOrmAL = , SW_SHOWMINIMIZED = , SW ...

  2. C# Bitmap/png转成jpg格式,压缩图片

    public static ImageCodecInfo GetEncoder(ImageFormat format) { ImageCodecInfo[] codecs = ImageCodecIn ...

  3. [linux]Error: failure: repodata/repomd.xml from fedora: [Errno 256] No more mirrors to try.

    在使用fedora17 系统的yum源的时候出现了例如以下错误: Error: failure: repodata/repomd.xml from fedora: [Errno 256] No mor ...

  4. kafka学习之-KafkaOffsetMonitor后台监控

    1.下载Kafka Consumer Offset Monitor安装包 http://pan.baidu.com/s/1ntzIUPN 2.在/usr/local/hadoop路径下面建立放置Kaf ...

  5. 在 ubuntu 【6.06、6.10】 上安装 oracle 10.2.0.1,并打补丁 10.2.0.5

    特点: ubuntu 6.06.6.10 算是很古老的ubuntu了,其应该是基于 debian 4 的 tesing/unstable 分支.所以,毛病较多. 如何安装oracle10g? 几个技术 ...

  6. QT编译错误:undefined reference to `__imp_gl*'等等

    学习QT OpenGL绘制图形,程序中使用了OpenGL的API函数(gl开头),但是编译出现了错误:截图如下 有过编程经验的人可知,是链接的时候出错,找不到函数的实现! 解决方法:在工程*.pro文 ...

  7. nginx配置http协议和tcp协议配置文件案例

    注意 nginx 1.9版本之后才支持 tcp #user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/e ...

  8. 如何用一个for循环打印出一个二维数组

    思路分析: 二维数组在内存中默认是按照行存储的,比如一个二维数组{{1,2,3,},{4,5,6}},它在内存中存储的顺序就是1.2.3.4.5.6,也就是说,对于这6个数组元素,按照从0到5给它们编 ...

  9. C++实现按1的个数排序

    题目内容:有一些0.1字符串,将其按1的个数的多少的顺序进行输出. 输入描述:本题只有一组测试数据.输入数据由若干数字组成,它是由若干个0和1组成的数字. 输出描述:对所有输入的数据,按1的个数进行生 ...

  10. Java -- 获取指定接口的所有实现类或获取指定类的所有继承类

    Class : ClassUtil package pri.lime.main; import java.io.File; import java.io.IOException; import jav ...