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 ...
随机推荐
- Eclipse设置类和方法的注释模板
一.打开设置模板的窗口:Window->Preference->Java->Code Style->Code Template展开Comments,最常用的就是类和方法的注释, ...
- mysql CREATE DATABASE语句 语法
mysql CREATE DATABASE语句 语法 作用:创建数据库. 大理石构件 语法:CREATE DATABASE database_name mysql CREATE DATABASE语句 ...
- Python_015(面向对象(接口类,抽象类,多态,封装)
一.抽象类与接口类 1.抽象类:抽象即类似或者说比较像的部分,继承描述的是父类与子类的一种关系,要找出这种关系,必须先抽象再继承; a:抽象分成两个层次: 1)由对象->类:将两个有相似地方的对 ...
- 解决 UIAlterController 不居中问题
最后更新:2017-06-30 现象描述 新公司做的解决的第一个bug 就是 UIAlterController 不居中,莫名其妙的飞出屏幕之外 找了很久的答案,最终在苹果论坛看到了相关的描述 We ...
- [CSP-S模拟测试]:序列(构造)
题目描述 给定$N,A,B$,构造一个长度为$N$的排列,使得:$\bullet$排列长度为$N$:$\bullet$最长上升子序列长度为$A$:$\bullet$最长下降子序列长度为$B$.我们有$ ...
- SqlServer2012 File Table文件表
SQL Server 2012 提供一种特殊的“文件表”,也称为“FileTable”. FileTable 是一种专用的用户表,它包含存储 FILESTREAM 数据的预定义架构以及文件和目录层次结 ...
- vue2.0 之 douban (三)创建header组件
1.分析 首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的h ...
- 术语-BPM:BPM
ylbtech-术语-BPM:BPM BPM,即业务流程管理,是一种以规范化的构造端到端的卓越业务流程为中心,以持续的提高组织业务绩效为目的的系统化方法,常见商业管理教育如EMBA.MBA等均将BPM ...
- python-网络编程urllib模块
一.操作网络发送请求 from urllib.request import urlopen #发送请求 from urllib.parse import urlencode #用来把字典形式转 ...
- python实现建立websocket通信
实现代码如下: #websocket协议通信 import threading import time import websocket def when_message(ws, message): ...