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),当用"#"表示是在特 ...
随机推荐
- C# POST数据base64到接口会出错的问题
这个base64在requestHeader里面变成了base64=hySGNg22yX0AIjNQvNJw0xHEbi32NH%2BiRVKDkbOmUiKpxW0%2FS6rUgfLmSa527Y ...
- flask with gae开发小结
最近因为要重写之前发布在GAE上的一个博客,又回顾了一下python,同时,因为用的flask,gae等等,一道写一些小总结,供日后查阅. 1, slugify 其实这个问题可以不考虑,只要你愿意用中 ...
- TensorFlow安装,升级,基本操作
一. 安装 ubuntu 16 python 2.7 pip install tensorflow 测试安装完成效果: 查看tensorFlow版本python import tensorflow a ...
- lua 时间戳和时间互相转换
1.时间戳转换成时间 local t = 1412753621000 function getTimeStamp(t) return os.date("%Y%m%d%H", ...
- ABBYY FineReader 12没你想得那么简单
你是否觉得自己对ABBYY FineReader 12已经了如指掌了?也许你会认为它不过就是一款OCR文字识别软件,能够快速方便地将扫描纸质文档.PDF文件或者数码相机的图像转换为可编辑.可搜索的格式 ...
- NetBpm Q&A(7)
原文:NetBPM工作流的一个示例:请假审批 前言 在NetBPM的实践与应用中,大家一定会遇到各种各样的问题,笔者特建此帖, 聚集了一些典型问题,并作了初步解答.本帖将不断更新,大家有什么问题,可以 ...
- flexbox子盒子flex属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS .tdb代替.dylib
原文链接:http://www.meniny.cn/2015/09/22/00-00-01-iOS_Xcode_7_tbd/ 不少升级 Xcode 7 的小伙伴们都表示在引入动态库时惊呆了,因为熟悉的 ...
- 【GIS】Cesium回到初始位置
var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100), 15 ...
- zabbix的源码安装
前提:安装好lnmp环境,参考: 搭建LNMP环境 下载软件包 1. 下载并解压安装包 cd /usr/local/src wget https://ncu.dl.sourceforge.net/ ...