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 UNIQUE约束 语法
mysql UNIQUE约束 语法 作用:UNIQUE 约束唯一标识数据库表中的每条记录. 江苏大理石平台 说明:UNIQUE 和 PRIMARY KEY 约束均为列或列集合提供了唯一性的保证.PRI ...
- luogu 5468 [NOI2019]回家路线 最短路/暴力
想写一个 70 pts 算法,结果数据水,直接就切了 最短路: // luogu-judger-enable-o2 #include<bits/stdc++.h> using namesp ...
- 【Python】selenium模拟淘宝登录
# -*- coding: utf-8 -*- from selenium import webdriver from selenium.webdriver.common.by import By f ...
- 【ELK】ELK日志套件安装与使用
ELK日志套件安装与使用 1.ELK介绍 ELK不是一款软件,而是elasticsearch+Logstash+kibana三款开源软件组合而成的日志收集处理套件,堪称神器.其中Logstash负 ...
- CodeForces - 474D (dp)
题目:https://vjudge.net/contest/326867#problem/B 题意:有很多个蛋糕,现在你有两种吃蛋糕的吃法,一次吃一个,定为A,一次吃k个定为B,然后问你吃m个蛋糕有多 ...
- A - Biorhythms (第三周)
A - Biorhythms 链接:https://vjudge.net/contest/154063#problem Description 人生来就有三个生理周期,分别为体力.感情和智力周期,它们 ...
- windows传输文件到linux脚本
安装pscp https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html cmd脚本 @echo off rem 拷贝的文件名称 se ...
- JS在页面输出九九乘法表
<!--小练习,练习使用循环实现一个九九乘法表 第一步,最低要求:在Console中按行输出 n * m = t 然后,尝试在网页中,使用table来实现一个九九乘法表 --> <! ...
- day57——ajax之初体验
转行学开发,代码100天——2018-05-12 今天是一个特别的日子——首先是母亲节,在此也祝福亲爱的妈妈健康长寿.其次今天是汶川大地震10周年,10年过去了,经历过苦难的人更加坚毅勇敢地面向未来! ...
- Delphi XE2 之 FireMonkey 入门(18) - TLang(多语言切换的实现)
一个小小的 TLang 类, 实现多语言切换, 挺好的. 它的工作思路是: 1.首先通过 AddLang('语言代码') 添加语言类别, 如: AddLang('en').AddLang('cn'). ...