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. Flutter

    2015年, Google 内部开始测试另一种高性能的编程方式,那就 Google 的 Sky 项目.Sky 项目使用网页开发语言Dart开发原生Android 应用,强调应用的运行速度和与 Web ...

  2. FBOSS: Building Switch Software at Scale

    BOSS: 大规模环境下交换机软件构建 本文为SIGCOMM 2018 论文,由Facebook提供. 本文翻译了论文的关键内容. 摘要: 在网络设备(例如交换机和路由器)上运行的传统软件,通常是由供 ...

  3. [Swift]LeetCode7. 反转整数 | Reverse Integer

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  4. [Swift]LeetCode479. 最大回文数乘积 | Largest Palindrome Product

    Find the largest palindrome made from the product of two n-digit numbers. Since the result could be ...

  5. [Swift]LeetCode781. 森林中的兔子 | Rabbits in Forest

    In a forest, each rabbit has some color. Some subset of rabbits (possibly all of them) tell you how ...

  6. 简单python程序练习

    1.打印※花矩形 i = 1 while i<=5: j = 1 while j <=5: print("*",end="") #end=" ...

  7. 【原创】一文掌握 Linux 性能分析之 I/O 篇

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 一文掌握 Li ...

  8. scala用ssh2连接Linux

    这个需要安装库: import ch.ethz.ssh2.{Connection, Session, StreamGobbler} 首先用 ip 和 post 创建连接: val conn: Conn ...

  9. Pycharm使用教程(三)(非常详细,非常实用)

    1. 汉化:把resources_zh.jar拷贝到PyCharm的安装目录下的lib目录,重启Pycharm即可. (resources_zh.jar汉化包关注本账号获取:链接: https://p ...

  10. 『高次同余方程 Baby Step Giant Step算法』

    高次同余方程 一般来说,高次同余方程分\(a^x \equiv b(mod\ p)\)和\(x^a \equiv b(mod\ p)\)两种,其中后者的难度较大,本片博客仅将介绍第一类方程的解决方法. ...