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. ubuntu14.04 安装lnmp + redis

    1.更新源 apt-get install update 2.安装nginx : apt-get install nginx 配置nginx: ① cd /etc/sites-enabled/ ② v ...

  2. JavaScript 异步编程的前世今生(下)

    ES6 中的 Generator 在 ES6 出现之前,基本都是各式各样类似Promise的解决方案来处理异步操作的代码逻辑,但是 ES6 的Generator却给异步操作又提供了新的思路,马上就有人 ...

  3. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  4. [Swift]LeetCode137. 只出现一次的数字 II | Single Number II

    Given a non-empty array of integers, every element appears three times except for one, which appears ...

  5. [Swift]LeetCode560. 和为K的子数组 | Subarray Sum Equals K

    Given an array of integers and an integer k, you need to find the total number of continuous subarra ...

  6. 浮点型和BigDecimal的使用

    //import java.math.*; package cn.xiaomu_01_rumrnjieduan; import java.math.BigDecimal; /** * 浮点型和BigD ...

  7. ubuntu中环境变量的几个问题思考

    问题一:export PATH=$PATH:/usr/local和export PATH=/usr/local:$PATH这两个的区别是什么?可以随便用吗? 这两个都是要把该目录加到环境变量中,一般的 ...

  8. Ceres Solver 在win8+vs2013环境下的安装

    参考博文:https://blog.csdn.net/wzheng92/article/details/79504709

  9. 【Scala篇】--Scala中集合数组,list,set,map,元祖

    一.前述 Scala在常用的集合的类别有数组,List,Set,Map,元祖. 二.具体实现 数组   1.创建数组 new Array[Int](10) 赋值:arr(0) = xxx Array[ ...

  10. ActivityLifecycleCallbacks 的简单使用

    转载自 http://blog.csdn.net/tongcpp/article/details/40344871 ActivityLifecycleCallbacks是什么? Application ...