有<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. HanLP-实词分词器详解

    在进行文本分类(非情感分类)时,我们经常只保留实词(名.动.形)等词,为了文本分类的分词方便,HanLP专门提供了实词分词器类NotionalTokenizer,同时在分类数据集加载处理时,默认使用了 ...

  2. TCP/IP 物理层卷二 -- 交换技术

    一.概念 交换技术是指各台主机之间.各通信设备之间或者主机和通信设备之间(简单理解:你的PC和我的PC之间.你的PC和我的路由器.路由器之间)为交换信息所采用的的数据格式和交换装置的方式. 二.交换技 ...

  3. 面试35-删除字符串重复字符-删除出现在第二个字符串中的字符-第一个只出现一次的字符-hash表计数

    #include<iostream>#include<algorithm>#include<functional>using namespace std;char ...

  4. [LGP2000] 拯救世界

    6的倍数 1/(1-x^6) 最多9块 (1-x^10)/(1-x) 最多5块 (1-x^6)/(1-x) 4的倍数 1/(1-x^4) 最多7块 (1-x^8)/(1-x) 2的倍数 1/(1-x^ ...

  5. CVE-2018-19824漏洞学习

    简介 在Linux内核4.19.6之前,本地用户可以通过在Sound / USB /card.c.的usb_audio_probe中错误处理一个恶意USB声音设备(没有接口)来利用ALSA驱动程序中的 ...

  6. python-socketserver实例

    import socketserver class MyTCPHandler(socketserver.BaseRequestHandler): def handle(self): while Tru ...

  7. python网络爬虫(6)爬取数据静态

    爬取静态数据并存储json import requests import chardet from bs4 import BeautifulSoup import json user_agent='M ...

  8. 笔记本电脑重装win7/win10系统教程

    由于笔记本第一次重装系统会出现系统装不上,还有出现找不到有效硬盘分区,等等问题,然后这篇文章主要讲解BIOS设置的方法,用此BIOS设置,电脑用原本安装系统的方式,能有效地解决以上问题,这有两种方法解 ...

  9. python 运算符与流程控制

    运算符与流程控制 运算符 赋值运算 用'='表示,'='的左边只能是变量 算术运算 +.-.*:加.减.乘 /:除法运算,运算结果为浮点数 //:除法运算,运算结果为整数(商) %:求余 **:求幂 ...

  10. 浅析Java泛型

    什么是泛型? 泛型是JDK 1.5的一项新特性,它的本质是参数化类型(Parameterized Type)的应用,也就是说所操作的数据类型被指定为一个参数,在用到的时候在指定具体的类型.这种参数类型 ...