当前位置: 首页 > news >正文

react嵌套路由

react嵌套页面

先从路由身上导出

import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
//引入页面;
import Home from './view/Home'; 
import About from './view/About';
import Integrated from './view/Integrated';
import Sidebar from './view/Sidebar';
import Latent from './view/Latent';
import Particulars from './view/Particulars';
import SecurityCheck from './view/SecurityCheck';

react 配置路由你可以在App.js中设置,也可以在index.js中配置,整体灵活度较高;
如果不上传服务器的话可以使用BrowserRouter包裹路由,地址栏就不会有井号出现

function App() {
//将需要的嵌套页面写在route标签内return (<HashRouter><Routes><Route path='/' element={<Login />} ></Route><Route path='/home' element={<Home />} ></Route><Route path='/about' element={<About />} >{/* 如果需要默认显示页面将不需要填写路径 ,子路由不需要写/斜杠跳转时会带有*/}<Route path='' element={<Integrated />} ></Route><Route path='sidebar' element={<Sidebar />} ><Route path='' element={<Latent />} ></Route><Route path='particulars' element={<Particulars />} ></Route><Route path='securityCheck' element={<SecurityCheck />} ></Route></Route></Route></Routes></HashRouter>);
}export default App;

在父页面内引入路由出口

import React, { useState, useEffect } from 'react';
import styles from './About.module.css'
import { Outlet, useNavigate } from 'react-router-dom';export default function About() {const navigate = useNavigate();return (<><div>About</div>{/* 可通过编程式路由进行子页面的切换显示(切换子页面不需要加斜杠) */}<div onClick={()=>{navigate('particulars', {replace: true});}}></div><Outlet /></>)
}

在子页面内写入内容

import React, { useEffect, useState } from 'react';
import styles from './Latent.module.css';export default function Latent() {return (<><div>Latent</div></>)
}

相关文章:

react嵌套路由

react嵌套页面 先从路由身上导出 import { HashRouter, Routes, Route, Navigate } from react-router-dom; //引入页面&#xff1b; import Home from ./view/Home; import About from ./view/About; import Integrated from ./view/Integrated; import Sidebar from ./vie…...

代码随想录 单调栈 Ⅰ

739. 每日温度 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替 思路&#…...

C++返回引用

在本文中&#xff0c;您将学习如何在函数中通过引用返回值&#xff0c;以及如何在程序中有效地使用它。 在C 编程中&#xff0c;不仅可以通过引用将值传递给函数&#xff0c;还可以通过引用返回值。 示例&#xff1a;通过引用返回 #include <iostream> int c; int add…...

010:连续跌3天,同时这三天收盘价都在20日均线下,第四天上涨的概率--以京泉华为例

对于《连续跌三天&#xff0c;压第四天上涨的盈利计算》&#xff0c;我们可以继续优化这个策略&#xff0c;增加条件&#xff1a;同时三天都收盘在20日均线下。 因为我们上一篇《获取20日均线数据到excel表中》获得了20日均线数据&#xff0c;我们可以利用均线数据来编写新的脚…...

MATLAB与Python:优势与挑战

本文旨在探讨MATLAB与Python在特定领域内的使用情况&#xff0c;并分析两者之间的优势和挑战。 MATLAB和Python都是流行的编程语言&#xff0c;广泛应用于科学计算、数据分析和机器学习等领域。在某些领域&#xff0c;如航空航天工程、自动化和电子工程嵌入式系统开发等&#…...

CSP-J第二轮试题-2019年-1、2题

文章目录 参考&#xff1a;总结 [CSP-J2019] 数字游戏题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示答案答案2 [CSP-J 2019] 公交换乘题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示…...

深入理解 python 虚拟机:原来虚拟机是这么实现闭包的

深入理解 python 虚拟机&#xff1a;原来虚拟机是这么实现闭包的 在本篇文章当中主要从虚拟机层面讨论函数闭包是如何实现的&#xff0c;当能够从设计者的层面去理解闭包就再也不用死记硬背一些闭包的概念了&#xff0c;因为如果你理解闭包的设计原理之后&#xff0c;这些都是…...

【数据结构-哈希表 一】【原地哈希】:缺失的第一个正整数

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【原地哈希】&#xff0c;使用【数组】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&…...

【C++设计模式之迭代器模式】分析及示例

简介 迭代器模式是一种行为型设计模式&#xff0c;它提供了一种顺序访问聚合对象元素的方法&#xff0c;而又不需要暴露聚合对象的内部结构。迭代器模式通过将遍历算法封装在迭代器对象中&#xff0c;可以使得遍历过程更简洁、灵活&#xff0c;并且符合开闭原则。 描述 迭代…...

【代码随想录】LC 27. 移除元素

文章目录 前言一、题目1、原题链接2、题目描述 二、解题报告1、思路分析2、时间复杂度3、代码详解 三、知识风暴 前言 本专栏文章为《代码随想录》书籍的刷题题解以及读书笔记&#xff0c;如有侵权&#xff0c;立即删除。 一、题目 1、原题链接 27. 移除元素 2、题目描述 二、…...

crash工具分析dma设备内存踩踏(一)

背景介绍 我们的客户在利用我们提供的SDK参考方案开发相关产品时&#xff0c;在产品方案上进行一些基础老化测试时&#xff0c;极低概率出现kernel随机panic问题&#xff0c;由于场景复杂&#xff0c;无法单独针对特定模块或功能进行拆解来进行实验排查&#xff0c;只能基于已…...

C#上位机——根据命令发送

C#上位机——根据命令发送 第一步&#xff1a;设置窗口的布局 第二步&#xff1a;设置各个属性 第三步&#xff1a;编写各个模块之间的关系...

BEVFormer代码跑通

1 环境配置 1.1 环境安装 # 1 拉取源码 github加速代理https://ghproxy.com/ git clone https://github.com/fundamentalvision/BEVFormer.git# 2 创建虚拟环境 conda create -n bev python3.8 -y# 3 激活虚拟环境 conda activate bev# 4.1 安装torch,torchvision,torchaud…...

kafka安装

kafka安装 1 kafka概念 1.1 kafka介绍 kafka是最初有Linkedin公司开发的&#xff0c;是一个分布式&#xff0c;分区&#xff0c;多副本&#xff0c;多生产者&#xff0c;多订阅者&#xff0c;基于zookeeper协调的分布式日志系统。具有高吞吐量&#xff0c;可扩展性和可容错性…...

Mac上安装Java的JDK多版本管理软件jEnv

JDK的多版本管理软件主要有以下三种&#xff1a; jEnv jEnv 是一个命令行工具&#xff0c;可以帮助您管理和切换不同版本的 Java 环境。它可以让您在不同的项目之间轻松切换 Java 版本。您可以使用 jenv global 命令设置全局 Java 版本&#xff0c;也可以使用 jenv local 命令…...

linux常见命令以及jdk,tomcat环境搭建

目录 Is pwd cd touch cat echo vim 复制粘贴 mkdir rm cp jdk部署 1. yum list | grep jdk进行查找​编辑 2.安装​编辑 3.再次确认 4.判断是否安装成功 tomcat安装 1.下载压缩包&#xff0c;把压缩包上传至linux(可能需要yum install lrzsz) 2.解压缩unzip 压缩包名&…...

将表情存入数据库

概念&#xff1a; 表情是一种比较特殊的字符串&#xff0c;为unicode编码&#xff0c;unicode编码要存入数据库一般情况下&#xff0c;是存不了的&#xff0c;有两种解决方式&#xff0c;一种将数据表编码方式改为unicode编码方式&#xff0c;但是这种情况适用于功能刚开始设计…...

H桥级联型五电平三相逆变器Simulink仿真模型

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

后端解决跨域(极速版)

header(Access-Control-Allow-Origin: *); header(Access-Control-Allow-Methods:*); 代表接收全部的请求&#xff0c;"POST,GET"//允许访问的方式 指定域&#xff0c;如http://172.20.0.206//宝塔的域名&#xff0c;注意不是&#xff1a;http://wang.jingyi.icu等…...

数据结构与算法-前缀树

数据结构与算法-前缀树详解 1 何为前缀树 2 前缀树的代码表示及相关操作 1 何为前缀树 前缀树 又称之为字典树,是一种多路查找树,多路树形结构,是哈希树的变种&#xff0c;和hash效率有一拼&#xff0c;是一种用于快速检索的多叉树结构。 性质&#xff1a;不同字符串的相同…...

Excel双坐标折线图保姆级教程:用散点图搞定多组数据对比(附详细步骤图)

Excel双坐标折线图进阶指南&#xff1a;用散点图实现精准数据可视化 在数据分析的日常工作中&#xff0c;我们经常遇到需要同时展示两组量纲差异巨大的数据——比如销售额&#xff08;百万级&#xff09;和增长率&#xff08;百分比&#xff09;。传统的双坐标折线图虽然能解决…...

PySceneDetect终极指南:5分钟掌握智能视频场景检测与分割

PySceneDetect终极指南&#xff1a;5分钟掌握智能视频场景检测与分割 【免费下载链接】PySceneDetect :movie_camera: Python and OpenCV-based scene cut/transition detection program & library. 项目地址: https://gitcode.com/gh_mirrors/py/PySceneDetect PyS…...

ai全程护航:让快马智能助手帮你搞定proteus安装与初学难题

最近在折腾Proteus仿真软件时&#xff0c;发现从安装到入门会遇到不少"坑"。好在发现了InsCode(快马)平台的AI辅助功能&#xff0c;整个过程变得轻松多了。这里分享下如何用AI搞定Proteus全流程难题的实践心得。 智能安装诊断 第一次安装Proteus时&#xff0c;遇到许…...

JeecgBoot低代码开发平台终极实战指南:从零开始构建企业级应用

JeecgBoot低代码开发平台终极实战指南&#xff1a;从零开始构建企业级应用 【免费下载链接】jeecg-boot jeecgboot/jeecg-boot 是一个基于 Spring Boot 的 Java 框架&#xff0c;用于快速开发企业级应用。适合在 Java 应用开发中使用&#xff0c;提高开发效率和代码质量。特点是…...

Spring PetClinic实战解析:从单体应用到云原生部署的5大架构亮点

Spring PetClinic实战解析&#xff1a;从单体应用到云原生部署的5大架构亮点 【免费下载链接】spring-petclinic A sample Spring-based application 项目地址: https://gitcode.com/gh_mirrors/sp/spring-petclinic 你是否遇到过这样的困境&#xff1a;在学习Spring框架…...

Qwen3-TTS-VoiceDesign实战案例:用‘撒娇稚嫩萝莉声’描述生成高拟真TTS音频

Qwen3-TTS-VoiceDesign实战案例&#xff1a;用‘撒娇稚嫩萝莉声’描述生成高拟真TTS音频 1. 项目概述与核心价值 Qwen3-TTS-VoiceDesign是一个让人惊艳的语音合成模型&#xff0c;它最大的特点就是能用简单的文字描述&#xff0c;生成你想要的任何声音风格。想象一下&#xf…...

Mermaid:文本驱动的可视化引擎深度指南

Mermaid&#xff1a;文本驱动的可视化引擎深度指南 【免费下载链接】mermaid mermaid-js/mermaid: 是一个用于生成图表和流程图的 Markdown 渲染器&#xff0c;支持多种图表类型和丰富的样式。适合对 Markdown、图表和流程图以及想要使用 Markdown 绘制图表和流程图的开发者。 …...

数字电路设计避坑指南:RS触发器和JK触发器的常见应用误区与波形分析

数字电路设计避坑指南&#xff1a;RS触发器和JK触发器的常见应用误区与波形分析 在数字电路设计中&#xff0c;触发器作为时序逻辑的基础单元&#xff0c;其稳定性和可靠性直接影响整个系统的性能。RS触发器和JK触发器作为两种最常用的触发器类型&#xff0c;看似简单的逻辑背…...

brpc并发编程模型性能对比:基准测试结果

brpc并发编程模型性能对比&#xff1a;基准测试结果 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recommendation etc. &…...

QGIS3.28最新版行政区合并避坑指南:县转市数据融合的3个关键检查点

QGIS 3.28行政区合并实战&#xff1a;县转市数据融合的3个关键检查点 当我们需要将县级行政区数据合并为市级边界时&#xff0c;看似简单的"线转面融合"操作背后&#xff0c;往往隐藏着诸多数据陷阱。许多中级用户在QGIS中执行这类操作时&#xff0c;明明步骤正确却频…...