React ROUTER之嵌套路由

news2025/4/16 5:26:44

在这里插入图片描述

在这里插入图片描述

第一张是需要修改router文件createBrowserRouterd参数数组中的路由关系

第二张是需要在一级路由的index.js中选择二级路由的位置

第一步是在全局的router.js文件中加入新的children属性,如图

在这里插入图片描述
第二步是在一级路由的index.js文件中声明outLet组件
在这里插入图片描述

默认二级路由

在未点击一级路由跳转二级路由的按钮时就已经将一个默认的二级路由渲染出来的操作

在这里插入图片描述

1.把想要的默认二级路由Path干掉

2.增加一个index属性并设置为true

在这里插入图片描述
并且一级路由组件的index.js也需要修改
在这里插入图片描述

404兜底组件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

两种路由模式

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2335705.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TestNG 单元测试详解

1、测试环境 jdk1.8.0 121 myeclipse-10.0-offline-installer-windows.exe TestNG 插件 org.testng.eclipse 6.8.6.20130607 0745 2、介绍 套件(suite):由一个 XML 文件表示,通过<suite>标签定义,包含一个或更多测试(test)。测试(test):由<test>定义&#xf…

通过python实现bilibili缓存视频转为mp4格式

需要提前下好ffmpeg import os import fnmatch import subprocess Bilibili缓存的视频&#xff0c;*280.m4s结尾的是音频文件&#xff0c;*050.m4s结尾的是视频&#xff0c;删除16进制下前9个0&#xff0c;即为正常音/视频 使用os.walk模块&#xff0c;遍历每一个目录&#xf…

【分享】Ftrans文件摆渡系统:既保障传输安全,又提供强集成支持

【分享】Ftrans文件摆渡系统&#xff1a;既保障传输安全&#xff0c;又提供强集成支持&#xff01; 在数字化浪潮中&#xff0c;企业对数据安全愈发重视&#xff0c;网络隔离成为保护核心数据的关键防线&#xff0c;比如隔离成研发网-办公网、生产网-测试网、内网-外网等。网络…

python每日一练

题目一 输入10个整数,输出其中不同的数,即如果一个数出现了多次,只输出一次(要求按照每一个不同的数第一次出现的顺序输出)。 解题 错误题解 a list(map(int,input().split())) b [] b.append(a[i]) for i in range(2,11):if a[i] not in b:b.append(a[i]) print(b)但是会…

算法思想之前缀和(二)

欢迎拜访&#xff1a;雾里看山-CSDN博客 本篇主题&#xff1a;算法思想之前缀和(二) 发布时间&#xff1a;2025.4.11 隶属专栏&#xff1a;算法 目录 算法介绍核心思想大致步骤 例题和为 K 的子数组题目链接题目描述算法思路代码实现 和可被 K 整除的子数组题目链接题目描述算法…

硬件知识积累 单片机+ 光耦 + 继电器需要注意的地方

1. 电路图 与其数值描述 1.1 单片机引脚信号为 OPtoCoupler_control_4 PC817SB 为 光耦 继电器 SRD-05VDC-SL-A 的线圈电压为 67Ω。 2. 需注意的地方 1. 单片机的推挽输出的电流最大为 25mA 2. 注意光耦的 CTR 参数 3. 注意继电器线圈的 内阻 4. 继电器的开启电压。 因为光耦…

Dockerfile 学习指南和简单实战

引言 Dockerfile 是一种用于定义 Docker 镜像构建步骤的文本文件。它通过一系列指令描述了如何一步步构建一个镜像&#xff0c;包括安装依赖、设置环境变量、复制文件等。在现实生活中&#xff0c;Dockerfile 的主要用途是帮助开发者快速、一致地构建和部署应用。它确保了应用…

MCU屏和RGB屏

一、MCU屏 MCU屏‌&#xff1a;全称为单片机控制屏&#xff08;Microcontroller Unit Screen&#xff09;&#xff0c;在显示屏背后集成了单片机控制器&#xff0c;因此&#xff0c;MCU屏里面有专用的驱动芯片。驱动芯片如&#xff1a;ILI9488、ILI9341、SSD1963等。驱动芯片里…

Elasticsearch 向量数据库,原生支持 Google Cloud Vertex AI 平台

作者&#xff1a;来自 Elastic Valerio Arvizzigno Elasticsearch 将作为第一个第三方原生语义对齐引擎&#xff0c;支持 Google Cloud 的 Vertex AI 平台和 Google 的 Gemini 模型。这使得联合用户能够基于企业数据构建完全可定制的生成式 AI 体验&#xff0c;并借助 Elastics…

蓝桥杯基础数论入门

一.试除法 首先我们要了解&#xff0c;所有大于1的自然数都能进行质因数分解。试除法作用如下&#xff1a; ​质数判断 试除法通过验证一个数是否能被小于它的数&#xff08;一般是用2到用根号x&#xff09;整除来判断其是否为质数。根据定义&#xff0c;质数只能被1和自身整除…

Spring 事件机制与观察者模式的深度解析

一、引言 在软件设计中&#xff0c;观察者模式&#xff08;Observer Pattern&#xff09;是一种非常经典且实用的设计模式。它允许一个对象&#xff08;Subject&#xff09;在状态发生改变时通知所有依赖它的对象&#xff08;Observers&#xff09;&#xff0c;从而实现对象之…

【软考系统架构设计师】信息安全技术基础知识点

1、 信息安全包括5个基本要素&#xff1a;机密性、完整性、可用性、可控性与可审查性。 机密性&#xff1a;确保信息不暴露给未授权的实体或进程。&#xff08;采取加密措施&#xff09; 完整性&#xff1a;只有得到允许的人才能修改数据&#xff0c;并且能够判断出数据是否已…

2025年第十六届蓝桥杯省赛真题解析 Java B组(简单经验分享)

之前一年拿了国二后&#xff0c;基本就没刷过题了&#xff0c;实力掉了好多&#xff0c;这次参赛只是为了学校的加分水水而已&#xff0c;希望能拿个省三吧 >_< 目录 1. 逃离高塔思路代码 2. 消失的蓝宝思路代码 3. 电池分组思路代码 4. 魔法科考试思路代码 5. 爆破思路…

01-算法打卡-数组-二分查找-leetcode(704)-第一天

1 数组基础理论 数组是存放在连续内存空间上的相同数据结构的集合。数组可以通过下标索引快速获取数据&#xff0c;因为数组的存储空间是连续的所以在删除、更新数据的时候需要移动其他元素的地址。 下图是一个数组的案例图形&#xff1a;【内存连续、索引小标从0开始可…

怎么看英文论文 pdf沉浸式翻译

https://arxiv.org/pdf/2105.09492 Immersive Translate Xournal打开

RabbitMQ 深度解析:从基础到高级应用的全面指南

&#x1f430; RabbitMQ 深度解析&#xff1a;从基础到高级应用的全面指南 前言&#x1f4d8; 一、RabbitMQ 简介⚙️ 二、核心特性可靠性 &#x1f512;灵活路由 &#x1f504;高可用性 &#x1f310;多协议支持 &#x1f30d;多语言客户端 &#x1f4bb;插件机制 &#x1f50…

【图灵Python爬虫逆向】题七:千山鸟飞绝

题目背景 题目地址&#xff1a;https://stu.tulingpyton.cn/problem-detail/7/ 这一题为中等难度 打开控制台时会发现进入无限debug&#xff0c;可以通过右键点击"一律不在此处暂停"来绕过这个障碍。 一、请求与响应分析 1. 请求参数分析 首先观察网络请求&…

ubuntu 2404 安装 vcs 2018

参考ubuntu 2204 安装 vcs 2018 系统信息 Ubuntu 24.04.2 LTS ubuntu和 安装后的 vcs 花费了 22G , 其中 "安装后的 vcs" 占13G预先配置 过程 和 2204 安装 vcs 2018 不同, 其他相同 // vm-tools 的安装, 不是虚拟机不需要 sudo apt-get update sudo apt-get inst…

潇洒浪: Dify 上传自定义文件去除内容校验 File validation failed for file: re.json

Dify上传文件 添加其他文件类型如 my.myselfsuffix 上传成功 执行报错 File validation failed for file: re.json 解决办法 Notepad++ 搜索dify源码