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; //引入页面; import Home from ./view/Home; import About from ./view/About; import Integrated from ./view/Integrated; import Sidebar from ./vie…...
代码随想录 单调栈 Ⅰ
739. 每日温度 给定一个整数数组 temperatures ,表示每天的温度,返回一个数组 answer ,其中 answer[i] 是指对于第 i 天,下一个更高温度出现在几天后。如果气温在这之后都不会升高,请在该位置用 0 来代替 思路&#…...
C++返回引用
在本文中,您将学习如何在函数中通过引用返回值,以及如何在程序中有效地使用它。 在C 编程中,不仅可以通过引用将值传递给函数,还可以通过引用返回值。 示例:通过引用返回 #include <iostream> int c; int add…...
010:连续跌3天,同时这三天收盘价都在20日均线下,第四天上涨的概率--以京泉华为例
对于《连续跌三天,压第四天上涨的盈利计算》,我们可以继续优化这个策略,增加条件:同时三天都收盘在20日均线下。 因为我们上一篇《获取20日均线数据到excel表中》获得了20日均线数据,我们可以利用均线数据来编写新的脚…...
MATLAB与Python:优势与挑战
本文旨在探讨MATLAB与Python在特定领域内的使用情况,并分析两者之间的优势和挑战。 MATLAB和Python都是流行的编程语言,广泛应用于科学计算、数据分析和机器学习等领域。在某些领域,如航空航天工程、自动化和电子工程嵌入式系统开发等&#…...
CSP-J第二轮试题-2019年-1、2题
文章目录 参考:总结 [CSP-J2019] 数字游戏题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示答案答案2 [CSP-J 2019] 公交换乘题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示…...
深入理解 python 虚拟机:原来虚拟机是这么实现闭包的
深入理解 python 虚拟机:原来虚拟机是这么实现闭包的 在本篇文章当中主要从虚拟机层面讨论函数闭包是如何实现的,当能够从设计者的层面去理解闭包就再也不用死记硬背一些闭包的概念了,因为如果你理解闭包的设计原理之后,这些都是…...
【数据结构-哈希表 一】【原地哈希】:缺失的第一个正整数
废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【原地哈希】,使用【数组】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为&…...
【C++设计模式之迭代器模式】分析及示例
简介 迭代器模式是一种行为型设计模式,它提供了一种顺序访问聚合对象元素的方法,而又不需要暴露聚合对象的内部结构。迭代器模式通过将遍历算法封装在迭代器对象中,可以使得遍历过程更简洁、灵活,并且符合开闭原则。 描述 迭代…...
【代码随想录】LC 27. 移除元素
文章目录 前言一、题目1、原题链接2、题目描述 二、解题报告1、思路分析2、时间复杂度3、代码详解 三、知识风暴 前言 本专栏文章为《代码随想录》书籍的刷题题解以及读书笔记,如有侵权,立即删除。 一、题目 1、原题链接 27. 移除元素 2、题目描述 二、…...
crash工具分析dma设备内存踩踏(一)
背景介绍 我们的客户在利用我们提供的SDK参考方案开发相关产品时,在产品方案上进行一些基础老化测试时,极低概率出现kernel随机panic问题,由于场景复杂,无法单独针对特定模块或功能进行拆解来进行实验排查,只能基于已…...
C#上位机——根据命令发送
C#上位机——根据命令发送 第一步:设置窗口的布局 第二步:设置各个属性 第三步:编写各个模块之间的关系...
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公司开发的,是一个分布式,分区,多副本,多生产者,多订阅者,基于zookeeper协调的分布式日志系统。具有高吞吐量,可扩展性和可容错性…...
Mac上安装Java的JDK多版本管理软件jEnv
JDK的多版本管理软件主要有以下三种: jEnv jEnv 是一个命令行工具,可以帮助您管理和切换不同版本的 Java 环境。它可以让您在不同的项目之间轻松切换 Java 版本。您可以使用 jenv global 命令设置全局 Java 版本,也可以使用 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.下载压缩包,把压缩包上传至linux(可能需要yum install lrzsz) 2.解压缩unzip 压缩包名&…...
将表情存入数据库
概念: 表情是一种比较特殊的字符串,为unicode编码,unicode编码要存入数据库一般情况下,是存不了的,有两种解决方式,一种将数据表编码方式改为unicode编码方式,但是这种情况适用于功能刚开始设计…...
H桥级联型五电平三相逆变器Simulink仿真模型
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
后端解决跨域(极速版)
header(Access-Control-Allow-Origin: *); header(Access-Control-Allow-Methods:*); 代表接收全部的请求,"POST,GET"//允许访问的方式 指定域,如http://172.20.0.206//宝塔的域名,注意不是:http://wang.jingyi.icu等…...
数据结构与算法-前缀树
数据结构与算法-前缀树详解 1 何为前缀树 2 前缀树的代码表示及相关操作 1 何为前缀树 前缀树 又称之为字典树,是一种多路查找树,多路树形结构,是哈希树的变种,和hash效率有一拼,是一种用于快速检索的多叉树结构。 性质:不同字符串的相同…...
实战构建开放数据可视化平台,从采集到展示的全流程开发指南
今天想和大家分享一个完整的开放数据可视化项目实战经验。这个项目从数据采集到最终展示,涵盖了全流程开发的关键环节,特别适合想积累真实项目经验的朋友参考。 项目背景与目标 开放数据正在成为数字化转型的重要资源,但很多开发者面对海量…...
CentOS 7.6 + Intel Parallel Studio XE 2017:手把手搞定VASP 5.4.4编译环境(附License激活避坑指南)
CentOS 7.6环境下Intel编译器与VASP 5.4.4的深度配置实战 在计算材料科学领域,VASP作为电子结构计算的黄金标准工具,其性能高度依赖底层编译环境的优化。本文将带您深入探索如何在CentOS 7.6系统上,通过Intel Parallel Studio XE 2017构建高性…...
从南邮实验报告看数据结构:顺序表、链表、二叉树、图,这些实验到底在练什么?
解码数据结构实验:从顺序表到图算法的编程思维进阶之路 当你第一次翻开数据结构实验手册,看到那些关于顺序表、链表、二叉树和图算法的题目时,是否曾困惑过这些看似枯燥的操作练习究竟能带来什么实际价值?南邮的这一系列实验设计绝…...
告别PS!用WPS宏批量改图片尺寸的隐藏技巧(附JSA API避坑指南)
告别PS!用WPS宏批量改图片尺寸的隐藏技巧(附JSA API避坑指南) 在电商运营、教育培训等日常工作中,批量处理图片是刚需。传统做法要么依赖Photoshop等专业软件(学习成本高),要么手动逐个调整&…...
农业气象监测系统—实时感知・远程管控・智能预警
在农业现代化向纵深推进的当下,气象数据已成为农业生产的 “核心指挥棒”。烟台中盾信息科技有限公司(下称 “烟台中盾科技”)紧扣农业农村发展需求,以物联网、大数据技术为基石,打造农业气象监测系统,构建…...
Obsidian Full Calendar:5步构建个人知识与时间管理一体化系统
Obsidian Full Calendar:5步构建个人知识与时间管理一体化系统 【免费下载链接】obsidian-full-calendar Keep events and manage your calendar alongside all your other notes in your Obsidian Vault. 项目地址: https://gitcode.com/gh_mirrors/obs/obsidian…...
2026年鱼生专用花生油:哪些品牌值得选?
大家好,今天咱们聊聊一个很有趣的话题——鱼生专用花生油。说到鱼生,大家可能会想到广东、广西地区的美食,尤其是那一道道色香味俱全的鱼生,简直让人垂涎欲滴。但是,鱼生的美味离不开优质的食用油,尤其是花…...
用CODrone数据集训练YOLOv8-OBB:手把手教你搞定无人机旋转目标检测模型
从CODrone到YOLOv8-OBB:实战无人机旋转目标检测全流程指南 无人机航拍视角下的目标检测一直是计算机视觉领域的难点——倾斜视角带来的目标旋转、飞行高度变化导致的尺度差异、复杂背景干扰等问题,让传统水平框检测方法捉襟见肘。本文将带您完整实现从CO…...
bert-base-chinese新手教程:从零开始学习中文预训练模型部署与使用
bert-base-chinese新手教程:从零开始学习中文预训练模型部署与使用 1. 认识bert-base-chinese模型 1.1 什么是BERT模型 BERT(Bidirectional Encoder Representations from Transformers)是Google在2018年发布的预训练语言模型。它通过大规…...
打造轻量级Windows系统:Tiny11Builder深度应用指南
打造轻量级Windows系统:Tiny11Builder深度应用指南 【免费下载链接】tiny11builder Scripts to build a trimmed-down Windows 11 image. 项目地址: https://gitcode.com/GitHub_Trending/ti/tiny11builder 价值定位:解决三大系统痛点 你的Windo…...
