Route的exact属性
exact是Route下的一个属性,react路由会匹配到所有能匹配到的路由组件,exact能够使得路由的匹配更严格一些。
exact的值为bool型,为true时表示严格匹配,为false时为正常匹配。
例子如下:
<Route path='/' component={Home} />
<Route path='/page' component={Page}>
//这种情况下,如果匹配路由path='/page',那么会把Home也会展示出来。
//既路由path='/page'会匹配路由path='/'和路由path='/page'
所以我们常常会添加exact来解决上述问题
<Route exact path='/' component={Home} />
<Route path='/page' component={Page} />
//这样匹配路由path='/page',只会匹配到Page组件
Route的exact属性的更多相关文章
- 使用Route Prefix 使用属性路由 精通ASP-NET-MVC-5-弗瑞曼
- react的路由中的switch和exact的使用
刚刚接触react不久,发现在项目中的路由配置中会有switch和exact的使用,现总结如下 switch 为了解决route的唯一渲染(仅仅渲染一个路由路径)出现的 <Switch> ...
- 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- React躬行记(13)——React Router
在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...
- 知识点总结 REACT
1.react中如何创建一个组件 ES6:class 组件名 extends Component{} ES5:var App=React.createClass({}) 2.render函数什么时候会 ...
- 不难懂--------react笔记
在jsx中不能使用class定义类名 因为class在js中是用来定义类的 定义类名的时候用className label中的for必须写成htmlFor Rea ...
- vue安装,router-link的一些属性,用法,tag active-class,to,replace,exex等等
第一步:$ npm install -g vue-cli 第二部:$ vue init webpack my-projectName 下面内容转载自:https://www.cnblogs.com/c ...
- vue-router各个属性的作用及用法
vue-router是vue单页面开发的路由,就是决定页面跳转的! <router-link> 组件支持用户在具体有路由功能的应用中(点击)导航.通过to属性指定目标地址. Props 属 ...
- [转]vue-router各个属性的作用及用法
转自以下网址,当备忘使用:https://www.cnblogs.com/goloving/p/9211358.html vue-router是vue单页面开发的路由,就是决定页面跳转的! <r ...
随机推荐
- 第一次使用博客及Coursera课程体验
前言: 第一天的学习目标有三个 开设博客园账户 开设Github账号 进行第一次coursera课程学习:Internet History, Technology, and Security (网址 ...
- python之assert
作用 assert用来验证一个表达式是否正确,如果正确则程序向下执行,如果错误则报错,其中报错信息可以自定义. 例子 表达式没有错误的情况 >>> assert mul(2, 3) ...
- 3D Computer Grapihcs Using OpenGL - 04 First Triangle
本节将绘制一个三角形 先看最终代码: MyGlWindow.cpp: #include <gl\glew.h> #include "MyGlWindow.h" void ...
- token与安全
http://ju.outofmemory.cn/entry/134189 关于 Token,你应该知道的十件事 https://blog.csdn.net/Fabulous1111/art ...
- Spring Boot 中使用 spring-boot-devtools (使用 Gradle 作为构建工具)
Spring Boot 中使用 spring-boot-devtools (使用 Gradle 作为构建工具) 本文使用 Gradle 作为构建工具,关于 Gradle 构建工具,可以理解为是 Mav ...
- JavaSE知识点:finalize,treeMap
*)finalize finalize是Object类的一个方法,在垃圾收集器执行的时候会调用被回收对象的此方法,可以覆盖此方法提供垃圾收集时的其他资源回收,例如关闭文件等. *)treeMap 参考 ...
- python 调用C++ DLL,传递int,char,char*,数组和多维数组
ctypes 数据类型和 C数据类型 对照表 ctypes type C type Python type c_bool _Bool bool (1) c_char char 1-character ...
- LeetCode 46——全排列
1. 题目 2. 解答 给定一个序列,序列中的任意一个数字都可以作为全排列的最后一位.然后,其余位置元素的确定便是剩余元素的一个全排列,也就是一个子问题. 例子中 [1, 2, 3] 的全排列,最后一 ...
- 深入理解webpack基本配置(一)
1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简 ...
- seaborn
Seaborn是基于matplotlib的Python数据可视化库. 它提供了一个高级界面,用于绘制引人入胜且内容丰富的统计图形. 一 风格及调色盘 风格 1 sns.set() 模式格式 2 s ...