router之switch
比较路由中有无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的更多相关文章
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- [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 ...
- (转) [it-ebooks]电子书列表
[it-ebooks]电子书列表 [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...
- OpenFlow
What is OpenFlow? OpenFlow is an open standard that enables researchers to run experimental protocol ...
- Java性能提示(全)
http://www.onjava.com/pub/a/onjava/2001/05/30/optimization.htmlComparing the performance of LinkedLi ...
- Introduction to Computer Networks(网络架构与七层参考模式)
Network Connectivity 1. Important terminologies 1) Link 设备连接的连线.Link本身既可以是有线的,也可以是无线的. 2) Node 设备.电脑 ...
- Learning Puppet — Resources and the RAL
Learning Puppet — Resources and the RAL Welcome to Learning Puppet! This series covers the basics of ...
- 【安全组网】思科IOS设备基础应用
思科IOS有2种主要命令行模式:用户模式与特权模式 1.用户模式(user mode),当用“>”表示实在用户模式下 2.特权模式(exec mode),当用"#"表示是在特 ...
随机推荐
- 最近输入法的问题:关于ctrl + space 无法开关闭输入法的问题
输入法无法切换最好解决方法首先任务栏上的输入法图标上点右键选择设置. 然后选择键设置,双击第一个“在不同的输入语言之间切换”先勾选“切换输入语言”下面选择左手ALT.取消右边“切换键盘布局”前的勾. ...
- TensorFlow:tf.train.Saver()模型保存与恢复
1.保存 将训练好的模型参数保存起来,以便以后进行验证或测试.tf里面提供模型保存的是tf.train.Saver()模块. 模型保存,先要创建一个Saver对象:如 saver=tf.train.S ...
- HTML5 touche vents drag to move & AF actionsheet by longTap
$('img').on("touchstart",function(E){ //E.preventDefault();E.stopPropagation(); var el=thi ...
- Java编程思想学习笔记——一切都是对象
前言 Java是基于C++的,但Java是一种更加纯粹的面向对象程序设计语言. C++和Java都是混合/杂合型语言.杂合型语言允许多种编程风格. 用引用操纵对象 每种编程语言都有自己操纵内存中元素的 ...
- js数组push方法使用注意
js 数组的push方法,想必大家都知道是向数组末尾添加元素,但是有一个很关键的点需注意: 引自MDN 返回值 当调用该方法时,新的 length 属性值将被返回. var sports = [&qu ...
- Adobe超分辨率算法:SRNTT
论文:Image Super-Resolution by Neural Texture Transfer 论文链接:https://arxiv.org/abs/1903.00834 项目地址:http ...
- QT QTransform与QMatrix 有啥区别?
刚开始学习QT,我使用的是QT5.12进行开发,要不时地查阅QT的官方帮助文档~ 仔细阅读QT官方帮助QTransform类以及QMatrix类,发现两个类的作用描述一模一样(“The QTransf ...
- Java 多线程编程知识详解
Java 给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特别的形式,但多线程使用 ...
- docker dockerfile构建自己的tomcat镜像
文件 1.apache-tomcat-8.5.24.tar.gz, jdk-8u151-linux-x64.tar.gz Dockerfile文件: FROM centosWORKDIR /usrCO ...
- [原]unity3d刀光剑影(二)
本篇研究 暴走武侠 效果.直接贴代码 Shader "Cg shader with single texture" { Properties { _MainTex ("T ...