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 ...
随机推荐
- gdbserver移植到DM368板子上的过程 以及segment fault problem
问题描述 我在PC机上安装了gdbserver,但是移植到板子上后却出现了问题.运行不了,显示错误:"segment fault". 决定重新在另一台虚拟机上gdbserver. ...
- SSIS - 9.文件系统任务
文件系统任务是用来操作服务器上的文件和目录的.比如,可以新建任务来创建.复制.删除或移动一个文件或一个目录. 一.操作和属性 一个文件系统可以定义如下10种操作. 所有的操作包含Name, Descr ...
- Naïve Media Player, Part 2
项目主页网址: https://github.com/Judylalala/en Q1:如何播放online歌曲? A1:我本来以为会为MediaElement设置一个单独的属性播放online音频. ...
- JQuery实现 图片上传
用到的文件,我都已经打包好了,自行下载: https://files.cnblogs.com/files/lguow/lib.rar 核心代码如下: <input type="hidd ...
- 【RL-TCPnet网络教程】第6章 RL-TCPnet底层驱动说明
第6章 RL-TCPnet底层驱动说明 本章节为大家讲解RL-TCPnet的底层驱动,主要是STM32自带MAC的驱动实现和PHY的驱动实现. 6.1 初学者重要提示 6.2 KEI ...
- Java实现桶排序和基数排序
桶排序代码: import java.util.Arrays; /** * 桶排序 * 工作的原理是将数组分到有限数量的桶里 * 每个桶再分别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序 ...
- [Swift]LeetCode93. 复原IP地址 | Restore IP Addresses
Given a string containing only digits, restore it by returning all possible valid IP address combina ...
- [Swift]LeetCode324. 摆动排序 II | Wiggle Sort II
Given an unsorted array nums, reorder it such that nums[0] < nums[1] > nums[2] < nums[3]... ...
- [Swift]LeetCode587. 安装栅栏 | Erect the Fence
There are some trees, where each tree is represented by (x,y) coordinate in a two-dimensional garden ...
- 51Nod-1006 最长公共子序列Lcs
题目链接 Description 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为: abcicba abdkscab ab是两个串的子序列,abc也是,abca ...