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 ...
随机推荐
- 手把手搭建K3cloud插件开发环境
最近几天在配置K3cloud开发环境,发现不论是产品论坛还是百度出来的结果,都不够满意,很多大咖给提供的环境搭建手册都是那个云山雾罩的PPT 也就是这个open.kingdee.com/K3Cloud ...
- 多数据源(sql server 2008,二个数据库不ip,)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 20180829-Java多线程编程
Java 多线程编程 Java给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分. 程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特 ...
- D. White Lines
D. White Lines 给定一个$n\times n$的$WB$矩阵,给定一个$k*k$的能把$B$变成$W$的橡皮擦,求橡皮擦作用一次后,全为$W$的行.列总数最大值 前缀和差分 #inclu ...
- CG-CTF | 综合题2
查源码发现一个文件读取:http://cms.nuptzj.cn/about.php?file=sm.txt,用它把能找到的php都读取下来 <?php if (!isset($_COOKIE[ ...
- 手机H5设计尺寸
手机型号 导航栏和状态栏的高度 宽度 高度 可视区域高度 iPhone 4 (4, 4S) 64px 320px 480px 416px iPhone 5 (5c, 5s) 64px 320px 56 ...
- Gradle 详解
Gradle简单来说,就是工程的管理,帮我们做了依赖,打包,部署,发布等工作.就像一个管家管理我们的项目,我们只用关心写代码就可以了. 1 gradle-wraaper.properties 主工程的 ...
- 架构-层-Model:Model
ylbtech-架构-层-Model:Model 1.返回顶部 1. Model,意思是模特儿,模特儿是英文“model”的音译.模特一般来说要五官端正,身材良好,有气质,展示能力强,另外身高要具备一 ...
- Socket 网络编程实践经验
目录 目录 相关文章 Socket 与 HTTP 的区别 生产实践考虑 网络断开重连问题 Heartbeat 心跳机制 使用非阻塞模式下的 select 函数进行 Socket 连接检查 会话过期问题 ...
- 几个模拟OLE事件注册、调用的宏
最近遇到一个要求,将原来的OCX控件,替换成直接的DLL调用. 遇到OLE的事件回调,写了三个宏,用于简化代码 #define OLE_ENVENT_IN_CLASS_ONE(event_name, ...