react route和Switch的区别 +嵌套路由

2023-11-17

Router:指定路由规则

  1. Router默认也是模糊匹配
  2. Router的path可以不写,如果不写,表示该组件一定匹配
  3. Switch:(选择 开关) Switch中只有一个组件能匹配,只会显示第一个匹配的组件
// exact 表示精确匹配
<Route path='/' component={Home} exact></Route>

Switch配合没有path属性的Route可以实现404页面

<Switch>
   <Route path='/' component={Home} exact></Route>
   <Route  component={NoMatch} ></Route>
</Switch>

以下是嵌套路由的知识点

  • 在React中,配置嵌套路由非常简单,因为Route就是一个组件,可以在任意想配置的地方进行配置
  • 但是配置嵌套路由的时候,需要对路径进行处理,必须要先匹配到父级路由,才能匹配到子路由
// 通过/home可以匹配Home父组件,再通过/list匹配组件
<Route path='/home/list' component={list}></Route>

哪个组件想添加嵌套路由,就在哪个组件中添加路由规则

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react route和Switch的区别 +嵌套路由 的相关文章

  • 如果字符串不匹配,.split() 返回什么?

    在此 JavaScript 代码中 如果变量data没有那个角色 那么 split 会返回什么呢 x data split 它会是原始字符串的数组吗 是的 根据ECMA262 15 5 4 14 String prototype split
  • 如何使用expressjs发送多个文件?

    我希望能够发送许多文件 如果可能的话 发送整个目录 以便我可以在从 html 文件调用的其他 js 文件中访问它 const app require express const http require http Server app co
  • WebPack 源映射令人困惑(重复文件)

    我决定在我今天正在启动的一个新项目上尝试 WebPack 并且我从源映射中得到了非常奇怪的行为 我在文档中找不到任何相关信息 在浏览 StackOverflow 时也找不到其他人遇到此问题 我目前正在查看由以下公司制作的 HelloWorl
  • Heroku 上重启后 Better-SQLite3 数据库重置

    我有一个 Discord 机器人better sqlite3 https github com JoshuaWise better sqlite3硬币和 XP 数据库 直到两周前它一直工作得很好 现在 每次重新启动后 它只会恢复 XP 和硬
  • 始终滚动 div 元素而不是页面本身

    我有一个带有内部的页面布局 div 包含页面上重要内容的元素 设计的重要部分是 content height 300px width 500px overflow scroll 现在 当包含的文本大于 300px 时 我需要能够滚动它 是否
  • 如何使用 CSS 或 javascript 创建圆角

    复制 使用 CSS 创建圆角的最佳方法是什么 https stackoverflow com questions 7089 what is the best way to create rounded corners using css 7
  • 如何在 JavaScript 中检查未定义的变量

    我想检查变量是否已定义 例如 以下内容会引发未定义的错误 alert x 我怎样才能捕获这个错误 在 JavaScript 中 null是一个对象 不存在的事物还有另一种价值 undefined DOM 返回null对于几乎所有无法在文档中
  • JSSOR - 无法读取未定义的类型属性“currentStyle”

    我正在尝试将 Jssor 滑块实现到我的页面中 但我不断在标题中出现该错误 我的内容是通过 Javascript 动态创建的 如下所示 var slide app createHTML div id inventorySlides null
  • 确定用户是否在shadow dom之外单击

    我正在尝试实现一个下拉菜单 您可以单击外部将其关闭 下拉列表是自定义日期输入的一部分 并且封装在输入的影子 DOM 内 我想写一些类似的东西 window addEventListener mousedown function evt if
  • 角度引导手风琴数据绑定问题

    我有 2 个相同型号的下拉菜单 一个位于手风琴内部 另一个位于外部 外部下拉菜单在 2 路数据绑定方面工作良好 但手风琴内部的下拉菜单似乎只有 1 路绑定 换句话说 在 UI 中选择并不会设置模型值 我找到了一个建议here https s
  • 如何将多个文件上传到Firebase?

    有没有办法将多个文件上传到 Firebase 存储 它可以在一次尝试内上传单个文件 如下所示 fileButton addEventListener change function e Get file var file e target
  • 如何在 Angular2 中为表单分配和验证数组

    我的模型 this profile 在 javascript 中有一个属性叫做emails 这是一个数组 email isDefault status 然后我将其定义如下 this profileForm this formBuilder
  • 如何使用 Eclipse 作为 Javascript IDE?

    我从官方下载页面下载了 eclipse Javascript IDE 但是 当我启动应用程序时 它显示 必须提供 Java 运行时环境或 Java 开发工具包才能运行 eclipse 我已经有一个运行良好的 eclipse 的 java I
  • jQuery 和所有 .js 文件无法在本地运行,只能在外部运行

    我有一个奇怪的问题 我正在编写一个网站 包括 jQuery 和一些插件 它们存储在 js 文件夹中 当我尝试通过浏览器 jQuery 打开它时 插件和所有自定义脚本都不起作用 也许这与我的代码有关 但不这么认为 当然 当我在外部包含 jQu
  • 从数据库中给定时间起经过的时间

    我有一个 HTML 表 其中包含从数据库中提取的记录 我正在使用 PHP MySQL 我的表中名为 Timer 的列未从数据库中检索 我需要在此处显示经过的时间 从数据库中的特定时间开始 例如 假设现在的时间是2013年2月21日下午6点2
  • Array.indexOf 如何比 Array.some 更高效

    这个问题的灵感来自于这个问题的竞争答案 具有多个参数的indexOf https stackoverflow com questions 39000151 indexof with multiple arguments 用户想知道一种有效的
  • 如何使用 javascript 迭代文件系统目录和文件?

    我正在使用 Javascript 编写一个应用程序 该应用程序将与 Phonegap 一起使用来制作 Android 应用程序 我正在使用 Phonegap File API 来读取目录和文件 相关代码如下所示 document addEv
  • 谷歌浏览器不显示一个网站的alert()弹出窗口

    我正在开发一个 javascript 循环 该循环会随着循环的进行而提醒每个键值 为了加快速度 我选中了 阻止此页面创建其他对话框 框 通常这只会抑制一个例程的弹出窗口 但它们还没有回来 在 Google Chrome 中 alert 消息
  • 如何设置 .eslintrc 来识别“require”?

    我是新来的ESLint http eslint org 并且我已经成功地将 ESLint 与IntelliJ https www jetbrains com idea 开箱即用 我的 ESLint 集成无法识别node 但对文档的基本审查表
  • 如何连接/组合两个数组以连接成一个数组?

    我正在尝试将 JavaScript 中的 2 个数组合并为一个 var lines new Array a b c lines new Array d e f 这是一个简单的例子 我希望能够将它们组合起来 这样当读取第二行时 数组中的第四个

随机推荐

  • Redis-五种数据结构

    1 五种数据结构图解如下 1 1 String数据结构 命令 get set del incr decrget set del incr decr 联想java map
  • Matplotlib绘制漂亮的饼状图

    python绘图系列文章目录 往期python绘图合集 python绘制简单的折线图 python读取excel中数据并绘制多子图多组图在一张画布上 python绘制带误差棒的柱状图 python绘制多子图并单独显示 python读取exc
  • 【满分】【华为OD机试真题2023 JAVA&JS】计算网络信号

    华为OD机试真题 2023年度机试题库全覆盖 刷题指南点这里 计算网络信号 知识点广搜数组 时间限制 1s 空间限制 256MB 限定语言 不限 题目描述 网络信号经过传递会逐层衰减 且遇到阻隔物无法直接穿透 在此情况下需要计算某个位置的网
  • MISC方向MeowMeowMeow解题方法

    下载好附件后 通过好多工具都没有找到flag 突发奇想通过010工具打开MeowMeow png 发现了一堆乱码 当划到最下面的时候 发现了那些乱码有一定的规律 这个时候向上找 找到最开始出现规律的位置 会发现与题目给的flag格式CatC
  • 1001 害死人不偿命的(3n+1)猜想 (15 分)

    1001 害死人不偿命的 3n 1 猜想 15 分 卡拉兹 Callatz 猜想 对任何一个正整数 n 如果它是偶数 那么把它砍掉一半 如果它是奇数 那么把 3n 1 砍掉一半 这样一直反复砍下去 最后一定在某一步得到 n 1 卡拉兹在 1
  • 函数模板全特化与偏特化

    模板为什么要特化 因为编译器认为 对于特定的类型 如果你能对某一功能更好的实现 那么就该听你的 模板分为类模板与函数模板 特化分为全特化与偏特化 全特化就是限定死模板实现的具体类型 偏特化就是如果这个模板有多个类型 那么只限定其中的一部分
  • 7 个非常实用的 Vue.js 库

    编辑整理 杨小爱 我们在开发项目的时候 为了提升开发效率 会经常使用一些实用的开发库 而Vue js 又是前端领域中很受欢迎的框架之一 因此 就有很多开发者开发了各种实用的库 在这里 我整理了 7 个觉得好用的 Vue js 库 希望这些库
  • Acwing 795. 前缀和

    include
  • Go测试学习

    前言 textcolor Green 前言 前言 这个专栏就专门来记录一下寒假参加的第五期字节跳动训练营 从这个专栏里面可以迅速获得Go的知识 Go测试学习 03 测试 3 1 单元测试 3 1 1 单元测试 规则 3 1 2 单元测试 例
  • Linux安装Tomcat详细教程

    一 安装前提 Tomcat依赖于Java环境 所以在运行Tomcat之前 我们需要提前配置好Java环境变量 可以参考以往教程 Linux安装Java详细教程 注 Tomcat和Java使用版本最好保持一致 如果用的JDK1 8 那么最好就
  • 三维模型3DTile格式轻量化压缩模型变形浅析

    三维模型3DTile格式轻量化压缩模型变形浅析 在对三维模型进行轻量化压缩处理的过程中 常常会出现模型变形的现象 这种变形现象多数源于模型压缩过程中信息丢失或误差累积等因素 以下将对此现象进行详细分析 首先 我们需要了解三维模型轻量化压缩的
  • 有限自动机总结

    有限自动机A用来识别字符串 它由5部分组成 1 alphabet 字符集 2 states 状态集合 3 init 初始状态 4 trans s ch 状态转移函数 5 end 可接受state 集合 A str true的意思是 A可以接
  • unity中mathf.Lerp的运用

    在unity3d中经常用线性插值函数Lerp 来在两者之间插值 两者之间可以是两个材质之间 两个向量之间 两个浮点数之间 两个颜色之间 其函数原型如下 1 Material Lerp 插值 function Lerp start Mater
  • 03目标检测-传统方法与深度学习算法对比

    一 目标学习的检测方法变迁及对比 目标检测 是当前计算机视觉和机器学习领域的研究热点 从Viola Jones Detector DPM等冷兵器时代的智慧到当今RCNN YOLO等深度学习土壤孕育下的GPU暴力美学 整个目标检测的发展可谓是
  • 在SpringBoot中使用百度AI,实现通用图片识别(身份证识别也通用)

    现在网上有好多第三方使用的文章 但是没几个是可以使用的 本片文章可以放心使用哦 3 1 先去百度ai官网注册一个账号 2 选择我们需要使用的功能 3 因为我们这个是测试使用 他每天会有很多次免费使用的次数 因此完全够用 4 去领取我们需要的
  • 结巴分词jieba添加自定义词典

    结巴分词添加自定义词典 有时候很有必要 比如下面这段话 test text 我们的健康码也是绿色的 这凭什么就限制我们的就医 如果使用默认的分词 那么 健康码 这个词会分成 健康 和 码 这里可以使用词典方式 添加自定义词典 新建一个txt
  • mysql写存储过程插入数据

    DROP PROCEDURE if exists insert emps test 下面就开始创建存储过程插入数据 DELIMITER 不加这个会报错 坑了我两个小时CREATE PROCEDURE insert emps test IN
  • C#分段读取超大文本文件

    一 概述 通过C 分段读取和操作超大内存的文本文件 保证操作大于3GB的txt时内存不会爆 包括获取txt文件总行数 按行分段等 二 操作流程 1 读取文件总行数 获取txt的总行数 public int GetTunnelInfos st
  • 【Qt&OpenCV 图像的形态学变换 morpholgyEx】

    腐蚀用于分割 isolate 独立的图像元素 膨胀用于连接 join 相邻的元素 腐蚀 膨胀可用于去噪 低尺寸结构元素的腐蚀操作很容易去掉分散的椒盐噪声点 图像轮廓提取 图像分割 寻找图像中的明显的极大值区域或极小值区域 高级形态学变换 开
  • react route和Switch的区别 +嵌套路由

    Router 指定路由规则 Router默认也是模糊匹配 Router的path可以不写 如果不写 表示该组件一定匹配 Switch 选择 开关 Switch中只有一个组件能匹配 只会显示第一个匹配的组件 exact 表示精确匹配