有<Switch>标签,则其中的<Route>在路径相同的情况下,只匹配第一个,这个可以避免重复匹配;

无<Switch>标签,则其中的<Route>在路径相同的情况下全都会匹配。更严重的是,还会匹配上级路径的,如下面例子:

https://www.jianshu.com/p/d5173d7b411a(copy

          <BrowserRouter>
<div>
<div>
<ul>
<li>
<Link to="/Guide/ContactUs">ContactUs</Link>
</li>
</ul>
</div>
<Switch>
<Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
<Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
</Switch>
</div>
</BrowserRouter>

react-router中,<switch>的更多相关文章

  1. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  2. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

  3. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  4. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  5. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  6. React Router的Route的使用

    Route 是 React Router中用于配置路由信息的组件,每当有一个组件需要根据 URL 决定是否渲染时,就需要创建一个 Route. 1) path 每个 Route 都需要定义一个 pat ...

  7. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  8. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  9. [React Router v4] Render Catch-All Routes with the Switch Component

    There are many cases where we will need a catch-all route in our web applications. This can include ...

  10. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

随机推荐

  1. 小记---------spark架构原理&主要组件和进程

    spark的主要组件和进程       driver (进程):     我们编写的spark程序就在driver上,由driver进程执行       master(进程):     主要负责资源的 ...

  2. git使用技巧集合(持续更新中)

    git使用技巧集合(持续更新中) 在团队协作中,git.svn等工具是非常重要的,在此只记录一些git使用过程中遇到的问题以及解决方法,并且会持续更新. 1.git commit之后,还没push,如 ...

  3. Docker 容器简介与部署

    关于Docker容器技术 参考文献:<docker 从入门到精通> Docker容器简介 Docker的构想是要实现 "Build,Ship and Run Any App,An ...

  4. python使用Flask作为MockServer的方法

    日常开发/测试过程中,需要对相关服务添加挡板--Mock 简单介绍一下使用python的Flask插件,对相关的服务进行Mock # coding:utf-8 import os from flask ...

  5. IAP技术原理

    目录 IAP技术原理 更新记录 IAP与ISP的概念及原理 ISP简介 ISP原理 IAP简介 IAP原理 IAP优势 IAP的设计 1.程序启动流程 2.中断向量表的重定位 3.IAP跳转APP函数 ...

  6. ES6 新增的数组的方法

    给定一个数组 let list = [ // wu: 武力 zhi:智力 { id: 1, name: '张飞', wu: 97, zhi: 10 }, { id: 2, name: '诸葛亮', w ...

  7. GO语言语法入门

    引言 Go Go语言是谷歌2009发布的编程语言,它是一种并发的.带垃圾回收的.快速编译的语言. 它结合了解释型语言的游刃有余,动态类型语言的开发效率,以及静态类型的安全性.它也打算成为现代的,支持网 ...

  8. pg数据库data文件夹达到32G

    最近工作中遇到pg数据库data文件夹大小达到32G,大致的排查流程如下: 1.首先查看是哪个文件或者那些文件比较大: 2.根据文件的名称找到对应的数据表a: 3.确认数据表a中数据实际上只有3000 ...

  9. Delphi 控制程序的执行

  10. 四,k8s集群资源清单定义入门

    目录 资源对象 创建资源的方法 清单帮助命令 创建测试清单 资源的三种创建方式 资源对象 workload:Pod, ReplicaSet, Deployment, StatefulSet, Daem ...