有<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. [转帖]2015年时的新闻:Debian GNU/Hurd 2015 发布

    Debian GNU/Hurd 2015 发布 oschina 发布于 2015年04月30日 https://www.oschina.net/news/62004/debian-gnu-hurd-2 ...

  2. python基础_面向对象

    面向对象定义 把一组数据结构和处理它们的方法组成对象(object),把相同行为的对象归纳为类(class),通过类的封装(encapsulation)隐藏内部细节,通过继承(inheritance) ...

  3. sed---流文本操作

    一:sed基本命令 sed的使用格式 sed [optiona] 'command' files sed 参数[-nefir] 动作[n1,[n2]] function sed -n:只有经过sed特 ...

  4. sql server len函数

    len函数 --返回字符表达式中的字符数 --如果字符串中包含前导空格和尾随空格,则函数将它们包含在内 --LEN对相同的单字节和双字节字符串返回相同的值 --示例:select LEN('no'), ...

  5. vue+element 使用Export2Excel导出表格组件

    下载表格组件是根据我自己的业务需求来封装的 使用的是vue中 xlsx 的插件,需要安装新的依赖及配置 仅供参考 不保证和你百分百匹配 安装依赖 npm install -S file-saver x ...

  6. javaScript基本使用api

    基本方法 isArray() 判断数组 isArray() 方法用于判断是否是数组(有兼容性) 语法:Array.isArray(arr) 返回值:是数组,返回true.不是数组,返回false. i ...

  7. ES6基本常见语法

    特色:写法更加优雅,更加像面像对象的编程,其思想和 ES5 是一致的. 箭头函数.this ES6中可以使用 => 作为函数表达形式,极简风格,参数+ => +函数体. var foo = ...

  8. 关于IDEA,多服务运行 Services -> Run Dashboard 部分服务添加变灰色,限制使用5个启动类,重启之后需要重新添加,服务在 Run Dashboard 中的显示排序问题,不显示 Services(Run Dashboard)

    我的IDEA版本为最新版本 变灰色的原因就是因为右键删除了那个启动的主配置类,然后就会显示灰色,再次打开这个醒目,就不会在Run Dashboard中显示这个主配置类了 解决方法 如果你要 调整这些服 ...

  9. Delphi Edit组件

  10. SSD源码解读——损失函数的构建

    之前,对SSD的论文进行了解读,可以回顾之前的博客:https://www.cnblogs.com/dengshunge/p/11665929.html. 为了加深对SSD的理解,因此对SSD的源码进 ...