react 路由配置中,如果根路由(/)匹配一个组件,另一个路由(/list)在进行匹配的时候也会匹配到根路由(/),即在 /list 页面展示的时候 / 页面总是展示在上方。

此时如果想进行严格匹配,有两种实现方式:

1、在 / 路由配置中使用 exact, 这时候在匹配 /list 时候, / 页面不会显示。

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

注意事项:

react-router 嵌套路由 内层route找不到

exact精确匹配

<Route component={xxx} path="/" />

 路径为“/”的时候用了exact精确查找,所以不会查找到页面的嵌套路由

react中的路由配置踩坑记的更多相关文章

  1. 记一次 Spring 事务配置踩坑记

    记一次 Spring 事务配置踩坑记 问题描述:(SpringBoot + MyBatisPlus) 业务逻辑伪代码如下.理论上,插入数据 t1 后,xxService.getXxx() 方法的查询条 ...

  2. Redis中的Scan命令踩坑记

    1 原本以为自己对redis命令还蛮熟悉的,各种数据模型各种基于redis的骚操作.但是最近在使用redis的scan的命令式却踩了一个坑,顿时发觉自己原来对redis的游标理解的很有限.所以记录下这 ...

  3. React中Ref 的使用 React-踩坑记_05

    React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...

  4. Gitlab Jenkins WebHook 持续集成配置踩坑记

    Jenkins相关介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 目的 配置Gitla ...

  5. vscode 配置踩坑记

    vscode-easy-less 遇到问题最好的解决方式是看官网文档,切记!!! 在web开发当中,经常会写less然后编译成css,当然在VS Code当中也有这样的插件(EasyLess), 但是 ...

  6. Hook踩坑记:React Hook react-unity-webgl

    自公司前后分离上手React以来,一个坑一个坑的踩,Class的全生命周期云里雾里,还么屡明白,就抱上了Hook的大腿不松手,确实爽到飞起.修改到Hook的过程基本比较顺畅,直接少了三分之一的代码,组 ...

  7. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  8. Spark踩坑记——Spark Streaming+Kafka

    [TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...

  9. Spark踩坑记——数据库(Hbase+Mysql)

    [TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...

随机推荐

  1. Python练手例子(14)

    79.字符串排序. #python3.7 if __name__ == '__main__': str1 = input('Input string:\n') str2 = input('Input ...

  2. WS_窗口风格常量

    WS_窗口风格常量 WS_BODER 窗口具有细线边框 WS_CAPTION 窗口具有标题栏(包含 WS_BODER) WS_CHILD 创建一个子窗口(此风格不能与 WS_POPUP 一起使用 ) ...

  3. [Swift]LeetCode850. 矩形面积 II | Rectangle Area II

    We are given a list of (axis-aligned) rectangles.  Each rectangle[i] = [x1, y1, x2, y2] , where (x1, ...

  4. 非对称加密技术里面,最近出现了一种奇葩的密钥生成技术,iFace人脸密钥技术

    要说到非对称加密技术啊,得先说说对称加密技术 什么是对称加密技术 对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥加密. 也就是密钥也可以用作解密密钥,这种方法在密码学中叫做对称 ...

  5. Python Django(WEB电商项目构建)

    (坚持每一天,就是成功) Python Django Web框架,Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型M,模板T和视图V组成. 安装Pyth ...

  6. 第五周 IP通信基础回顾

    广播请求,单播响应,ARP IPV4,IP地址32位二进制代码分为8个位一组 路由器每一个接口都是一个网段 ,网段与网段区分看网络地址 同一段链路是同网段 直接广播:主机号全为1 受限广播:全为1 特 ...

  7. C# 多线程学习笔记 - 1

    本文主要针对 GKarch 相关文章留作笔记,仅在原文基础上记录了自己的理解与摘抄部分片段. 遵循原作者的 CC 3.0 协议. 如果想要了解更加详细的文章信息内容,请访问下列地址进行学习. 原文章地 ...

  8. BBS论坛(十七)

    17.首页导航条实现和代码抽离 (1)temlates/common/_head.html <meta name="csrf-token" content="{{ ...

  9. Linux~yum命令安装程序

    当我们使用linux的最小安装时,很多系统程序都没有被安装,这时,我们可以通过yum命令安装指定的包包,当然前提是你的linux处于联网状态的,下面说一下yum的用法 1 显示程序列表(联网的) yu ...

  10. Asp.Net SignalR - 持久连接类

    持久连接类 通过SignalR持久连接类可以快速的构建一个即时通讯的应用,上篇博文已经我们创建一个owin Startup类和一个持久连接类来完成我们的工作,然后在Startup类的Configura ...