react-route-dom 实现简单的嵌套路由

news/2024/2/29 2:57:41

最终效果
点击 to test1

点击to test2  =>  to test21


点击to test2  =>  to test22

代码如下
 

          path: "page",element: <父组件 />,children: [{ path: "test1", element: <Test1 /> },{path: "test2",element: <Test2 />,children: [{ path: "test21", element: <Test21 /> },{ path: "test22", element: <Test22 /> },],},],

父组件如下 

   import { NavLink, Outlet } from "react-router-dom";    <div>I am 父组件<div><NavLink to="/en/page/test1"> to test1</NavLink></div><div><NavLink to="/en/page/test2"> to test2</NavLink></div><div style={{ marginLeft: "80px" }}><Outlet /></div></div>

test1组件

import React from "react";
const Test1 = () => {return <div> I am test1</div>;
};
export default Test1;

test2组件

import React from "react";
import { NavLink, Outlet } from "react-router-dom";const Test2 = () => {return (<div>I am test2{/* link */}<div><NavLink to="/en/apply/test2/test21"> to test21</NavLink></div><div><NavLink to="/en/apply/test2/test22"> to test22</NavLink></div><div style={{ marginTop: "60px" }}><Outlet /></div></div>);
};
export default Test2;

test21组件
​​​​​​​

import React from "react";
const Test21 = () => {return <div> I am test21</div>;
};
export default Test21;

test22组件

import React from "react";
const Test22 = () => {return <div> I am test22</div>;
};
export default Test22;


https://www.xjx100.cn/news/3118765.html

相关文章

基于谷歌Flutter的媒体资讯APP的设计与实现

基于谷歌Flutter框架媒体资讯App的设计与实现 摘要&#xff1a; 当今社会&#xff0c;随着经济和科技的发展&#xff0c;人们的生活节奏也愈来愈快&#xff0c;人们生活的阅读时间也越来越少&#xff0c;越发的流行碎片化阅读&#xff0c;而同样的对于互联网的客户端开发者&am…

vscode一直不能跳转函数定义或者别的定义c_cpp_properties.json、settings.json

vscode好几天一直不能跳转函数定义或者别的定义&#xff0c;突然又好了。。。 c_cpp_properties.json {"configurations": [{"name": "windows-gcc-x86","includePath": ["${workspaceFolder}/**","D:/adas/ADAS_FUS…

保障海外业务发展,Coremail提供高效安全的海外通邮服务

11月22日&#xff0c;Coremail举办《全球通邮&#xff1a;如何保障安全、快捷的海外中继服务》直播分享会&#xff0c;直播会上Coremail安全团队和直播嘉宾复旦大学校园信息化办公室徐艺扬老师就海外中继服务进行了深度分享。 ​ 海外通邮困难重重 境外垃圾邮件数量居高不下…

BatchOutput PDF for Mac(PDF 批量处理软件)

BatchOutput PDF是一款适用于 Mac 的 PDF 批量处理软件。它可以帮助用户将多个 PDF 文件进行异步处理&#xff0c;提高工作效率。 BatchOutput PDF 可以自动化执行许多任务&#xff0c;包括 PDF 文件的打印、转换、分割、压缩、加密、重命名等&#xff0c;而且它还可以将自定义…

VsCode中使用功能vite创建vue3+js项目报错

VsCode中使用功能vite创建vue3js项目报错 VsCode中使用功能vite创建vue3js项目import模块报错如下处理方法 VsCode中使用功能vite创建vue3js项目import模块报错如下 处理方法 在项目根目录新建jsconfig.json {"compilerOptions": {"baseUrl": "./&q…

人工智能(pytorch)搭建模型21-基于pytorch搭建卷积神经网络VoVNetV2模型,并利用简单数据进行快速训练

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能(pytorch)搭建模型21-基于pytorch搭建卷积神经网络VoVNetV2模型&#xff0c;并利用简单数据进行快速训练。VoVNetV2模型是计算机视觉领域的一个重要研究成果&#xff0c;它采用了Voice of Visual Residual&…

Python处理IP地址的利器IPy

文章目录 一、安装IPy二、IP类&#xff1a;处理单网段2.1 查看网段包含的IP地址2.2 查看地址是IPv4还是IPv62.3 格式化输出地址2.4 已知掩码求网段2.5 将IP地址转换为字符串2.6 处理IP地址段的包含关系 三、IPSet类&#xff1a;处理多网段3.1 多网段聚合处理3.2 判断多个网段是…

Spring Cloud Gateway集成SpringDoc,集中管理微服务API

本文目标 Spring Cloud微服务集成SpringDoc&#xff0c;在Spring Cloud Gateway中统一管理微服务的API&#xff0c;微服务上下线时自动刷新SwaggerUi中的group组。 依赖版本 框架版本Spring Boot3.1.5Spring Cloud2022.0.4Spring Cloud Alibaba2022.0.0.0Spring Doc2.2.0Nac…