有<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. nginx一些高级配置

    参数: https://www.wangbokun.com/%E8%BF%90%E7%BB%B4/2018/07/21/Nginx.html   免费证书等 1/ nginx代理hue限制上传文件大小 ...

  2. java 实现读取某个目录下指定类型的文件

    我这里是读取txt类型的文件,在指定的目录下有不同类型的文件 实现代码,读取txt类型的文件并打印出该文件的绝对路径 package com.SBgong.test; import java.io.F ...

  3. 【pytorch】学习笔记(三)-激励函数

    [pytorch]学习笔记-激励函数 学习自:莫烦python 什么是激励函数 一句话概括 Activation: 就是让神经网络可以描述非线性问题的步骤, 是神经网络变得更强大 1.激活函数是用来加 ...

  4. # N数码问题

    N数码问题 首先,先贯彻一个理念.奇偶性很神奇,对于一类问题,如果属于同种性质(奇偶性相同),那么它们就是完全相同(这个在某种意义上说)的,,一些问题如果奇偶性相同那么里面涉及的问题都是等价的. 数码 ...

  5. redis 学习(12)-- redis 发布订阅

    redis 发布订阅 发布订阅模式中的角色 发布者(publisher) 订阅者(subscriber) 频道(channel) 如图所示: 发布者发布消息到频道,订阅了频道的订阅者可以收到消息,订阅 ...

  6. 北大 ACM highways问题研究(最小生成树)

    #include<stdlib.h> #include<stdio.h> #include<queue> struct vertex//代表一个村庄 { int m ...

  7. python--命令(各个模块的安装)

    python命令行 退出python命令行:exit() 安装pymysql pip install pymysql 安装request pip install requests 1.安装django ...

  8. mybatis查询返回的对象不为null,但是属性值为null

    返回的对象不为null,但是属性值为null 代码如下: <resultMap id="BaseResultMap" type="com.trhui.ebook.d ...

  9. 小米Air 13.3 安装Arch Linux

    0. 前言 最近新买了一台小米Air 13.3,除了但键盘手感外都比较满意.我比较喜欢折腾Linux,但又不想放弃原有的Windows 10 Home,于是在原有的windows 10基础上再安装了A ...

  10. Winform Global exception and task parallel library exception;

    static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static vo ...