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 ...
随机推荐
- mysql NOT NULL约束 语法
mysql NOT NULL约束 语法 作用:约束强制列不接受 NULL 值. 东莞大理石平台 说明:NOT NULL 约束强制字段始终包含值.这意味着,如果不向字段添加值,就无法插入新记录或者更新记 ...
- Liunx的软链接和硬链接
ln 命令 命令名称: ln. 英文原意: make links between file. 所在路径: /bin/ln. 执行权限:所有用户. 功能描述:在文件之间建立链接. ln 命令 ...
- 三维显示插件——C++
Qt 3D 构建自己的C/C++插件开发框架——系列:https://blog.csdn.net/chgaowei/article/details/4545211 如何使用Qt 3D开发3D场景程序: ...
- javascript中面向对象的两种构建方式(构造函数)和(原型模式的区别)
1.构造函数模式--->alert的结果为false <!DOCTYPE html> <html lang="en"> <head> &l ...
- 一本通&&洛谷 ——靶型数独——题解
题目传送 主要是搜索顺序不同导致效率千差万别. 联想人做数独的策略,总是先填可填数最少的那个空,再填选择第二少的...其实这种策略就造就了一个深度浅时分支也较少的搜索树.合适的搜索顺序再配合剪枝==A ...
- D1. Kirk and a Binary String (easy version)
D1. Kirk and a Binary String (easy version) 01串找最长不降子序列 给定字符串s,要求生成一个等长字符串t,使得任意l到r位置的最长不降子序列长度一致 从后 ...
- Java Interger类,两对整数明明完全一样,为何一个输出true,一个输出false
package text; public class MethodOverload { public static void main(String[] args) { Integer i1=100; ...
- 使用java操作elasticsearch之与es简历连接
Elasticsearch 的 Java 客户端非常强大:它可以建立一个嵌入式实例并在必要时运行管理任务. 运行一个 Java 应用程序和 Elasticsearch 时,有两种操作模式可供使用.该应 ...
- testlink用例转换工具2018.12版
首先说明一点,网上有很多资料,但真正可用的很少:在本人经过百度后,发现其实很多案例会因为各种原因而无法最终实现. Testlink用例转换工具,可以大致分为3种工具: 1)EX-Converter由第 ...
- react-native 组件之间传值
1.通过 AsyncStorage 将值保存在本地(最低端的方法) import { AsyncStorage, } from 'react-native'; // 保存 IP AsyncStorag ...