react中的路由配置踩坑记
react 路由配置中,如果根路由(/)匹配一个组件,另一个路由(/list)在进行匹配的时候也会匹配到根路由(/),即在 /list 页面展示的时候 / 页面总是展示在上方。
此时如果想进行严格匹配,有两种实现方式:
1、在 / 路由配置中使用 exact, 这时候在匹配 /list 时候, / 页面不会显示。

2、去除了exact之后,无论进哪个页面都是“/”对应的页面,这个时候,只需要把路由的顺序调整一下,把“/”这个Route放到最后即可

注意事项:
exact精确匹配
<Route component={xxx} path="/" />
路径为“/”的时候用了exact精确查找,所以不会查找到页面的嵌套路由
react中的路由配置踩坑记的更多相关文章
- 记一次 Spring 事务配置踩坑记
记一次 Spring 事务配置踩坑记 问题描述:(SpringBoot + MyBatisPlus) 业务逻辑伪代码如下.理论上,插入数据 t1 后,xxService.getXxx() 方法的查询条 ...
- Redis中的Scan命令踩坑记
1 原本以为自己对redis命令还蛮熟悉的,各种数据模型各种基于redis的骚操作.但是最近在使用redis的scan的命令式却踩了一个坑,顿时发觉自己原来对redis的游标理解的很有限.所以记录下这 ...
- React中Ref 的使用 React-踩坑记_05
React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...
- Gitlab Jenkins WebHook 持续集成配置踩坑记
Jenkins相关介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 目的 配置Gitla ...
- vscode 配置踩坑记
vscode-easy-less 遇到问题最好的解决方式是看官网文档,切记!!! 在web开发当中,经常会写less然后编译成css,当然在VS Code当中也有这样的插件(EasyLess), 但是 ...
- Hook踩坑记:React Hook react-unity-webgl
自公司前后分离上手React以来,一个坑一个坑的踩,Class的全生命周期云里雾里,还么屡明白,就抱上了Hook的大腿不松手,确实爽到飞起.修改到Hook的过程基本比较顺畅,直接少了三分之一的代码,组 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
- Spark踩坑记——数据库(Hbase+Mysql)
[TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...
随机推荐
- Python练手例子(14)
79.字符串排序. #python3.7 if __name__ == '__main__': str1 = input('Input string:\n') str2 = input('Input ...
- WS_窗口风格常量
WS_窗口风格常量 WS_BODER 窗口具有细线边框 WS_CAPTION 窗口具有标题栏(包含 WS_BODER) WS_CHILD 创建一个子窗口(此风格不能与 WS_POPUP 一起使用 ) ...
- [Swift]LeetCode850. 矩形面积 II | Rectangle Area II
We are given a list of (axis-aligned) rectangles. Each rectangle[i] = [x1, y1, x2, y2] , where (x1, ...
- 非对称加密技术里面,最近出现了一种奇葩的密钥生成技术,iFace人脸密钥技术
要说到非对称加密技术啊,得先说说对称加密技术 什么是对称加密技术 对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥加密. 也就是密钥也可以用作解密密钥,这种方法在密码学中叫做对称 ...
- Python Django(WEB电商项目构建)
(坚持每一天,就是成功) Python Django Web框架,Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型M,模板T和视图V组成. 安装Pyth ...
- 第五周 IP通信基础回顾
广播请求,单播响应,ARP IPV4,IP地址32位二进制代码分为8个位一组 路由器每一个接口都是一个网段 ,网段与网段区分看网络地址 同一段链路是同网段 直接广播:主机号全为1 受限广播:全为1 特 ...
- C# 多线程学习笔记 - 1
本文主要针对 GKarch 相关文章留作笔记,仅在原文基础上记录了自己的理解与摘抄部分片段. 遵循原作者的 CC 3.0 协议. 如果想要了解更加详细的文章信息内容,请访问下列地址进行学习. 原文章地 ...
- BBS论坛(十七)
17.首页导航条实现和代码抽离 (1)temlates/common/_head.html <meta name="csrf-token" content="{{ ...
- Linux~yum命令安装程序
当我们使用linux的最小安装时,很多系统程序都没有被安装,这时,我们可以通过yum命令安装指定的包包,当然前提是你的linux处于联网状态的,下面说一下yum的用法 1 显示程序列表(联网的) yu ...
- Asp.Net SignalR - 持久连接类
持久连接类 通过SignalR持久连接类可以快速的构建一个即时通讯的应用,上篇博文已经我们创建一个owin Startup类和一个持久连接类来完成我们的工作,然后在Startup类的Configura ...