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

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

最终效果
点击 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;

相关文章:

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

最终效果 点击 to test1 点击to test2 > to test21 点击to test2 > to test22 代码如下 path: "page",element: <父组件 />,children: [{ path: "test1", element: <Test1 /> },{path: "test2",element: <Test2 />…...

万界星空科技灯具行业MES介绍

中国是LED照明产品最大的生产制造国&#xff0c;如今&#xff0c;我国初步形成了包括LED外延片的生产、LED芯片的制备、LED芯片的封装以及LED产品应用在内的较为完超为产业链&#xff0c;随着LED照明市场渗诱率的快速警升&#xff0c;LED下游应用市场将会越来越广阔。这也将推动…...

16进制字符串转字符串

一、浏览器上 function hexToUtf8(hexString) {const hexArray hexString.match(/.{1,2}/g) || [];const uint8Array new Uint8Array(hexArray.map(hex > parseInt(hex, 16)));const textDecoder new TextDecoder(GB2312); //可以切换字符编码return textDecoder.decode…...

pymysql.err.InternalError: (1054, “Unknown column ‘nan‘ in ‘field list‘“

记录在本地环境通过&#xff0c;然后在云环境&#xff0c;解决问题的过程&#xff1b; 最近两天遇到一个bug&#xff0c;具体就是在本地Pyhon环境运行成功&#xff0c;但是当放在云服务跑的时候&#xff0c;去屡屡报错&#xff0c;具体报错信息如下&#xff1a; pymysql.err.I…...

SQL 错误 [1476] [22012]: ORA-01476: 除数为 0

Oracle sql 语句 添加判断&#xff0c;如果分母为0&#xff0c;则查询结果为0&#xff0c;如果分母不为0&#xff0c;则返回查询结果 你可以使用条件表达式来实现这个要求。以下是一个示例的Oracle SQL查询语句&#xff0c;其中添加了判断条件来处理分母为0的情况&#xff1a;…...

go语言项目的目录结构

Golang 的项目目录结构并没有一个强制的标准&#xff0c;但社区中形成了一些共识和最佳实践&#xff0c;以便更好地组织和管理代码。以下是一个典型的 Golang 项目目录结构示例&#xff1a; /myproject ├── /cmd | ├── /app | | └── main.go | …...

Android : DataBinding 简化开发 简单应用

1.导包 ViewModel 用于观察数据 // 使用androidx版本库 ViewModelProviders implementation androidx.lifecycle:lifecycle-extensions:2.1.0-alpha032.在build.gradle 添加 在android 代码块中添加 复制后点更新&#xff08;Sync Now&#xff09; android{...// 步骤1.开启…...

计算机网络:应用层(下篇)

文章目录 前言一 、电子邮件&#xff08;Email&#xff09;1.邮件服务器2.SMTP[RFC 2821]3.邮件报文格式4.邮件访问协议 二、DNS&#xff08;域名系统&#xff09;1.DNS的历史2.DNS总体思路和目标&#xff08;1&#xff09;问题1&#xff1a;DNS名字空间&#xff08;2&#xff…...

干货分享 | TSMaster小程序启动和停止的自动化控制流程

在实际应用场景中&#xff0c;用户常常需要按一定逻辑和时序来控制TSMaster内置功能模块的启动和停止&#xff0c;TSMaster软件内置有C/Python小程序和图形程序&#xff0c;开发者可以通过编程对这些模块的运行进行精确控制。本文将重点和大家分享一下如何通过C代码来控制TSMas…...

AI视频智能分析识别技术的发展与EasyCVR智慧安防视频监控方案

随着科技的不断进步&#xff0c;基于AI神经网络的视频智能分析技术已经成为了当今社会的一个重要组成部分。这项技术通过利用计算机视觉和深度学习等技术&#xff0c;实现对视频数据的智能分析和处理&#xff0c;从而为各个领域提供了广泛的应用。今天我们就来介绍下视频智能分…...

外包干了2个月,技术倒退2年。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;20年通过校招进入深圳某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…...

书-用数组存储高于60低于70的人单独存起来

#include<stdio.h> # define N 10 //书-用数组存储高于60低于70的人单独存起来 int main(){float s[N]{68.2,62.3,63.4,34.5,45.6,56.7,67.8,78.9,89.0,100};int i;float diyu[100];int j0;for(i0;i<N;i){if(s[i]>60 && s[i]<70)diyu[j]s[i];//这里的范…...

三、DVP摄像头调试笔记(图片成像质量微调整,非ISP)

说明&#xff1a;当前调试仅仅用来测试和熟悉部分摄像头寄存器模式 一、图片成像方向控制&#xff0c;基本每个摄像头都会有上下左右翻转寄存器 正向图片 反向图片 二、设置成像数据成各种颜色&#xff0c;&#xff08;黑白/原彩/黄色等等&#xff09; 在寄存器书册描述中…...

Linux--程序地址空间

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 [TOC](文章目录) 一、程序地址空间回顾 我们在讲C语言的时候&#xff0c;老师给大家画过这样的空间布局…...

【超全】React学习笔记 下:路由与Redux状态管理

React学习笔记 React系列笔记学习 上篇笔记地址&#xff1a;【超全】React学习笔记 上&#xff1a;基础使用与脚手架 中篇笔记地址&#xff1a;【超全】React学习笔记 中&#xff1a;进阶语法与原理机制 React路由概念与理解使用 1. 引入 React路由是构建单页面应用(SPA, Sin…...

matplotlib学习

显示两个figure 坐标上刻度修改 plt.xlim() 下标范围 plt.xticks() 替换新的下标 图例显示 散点图 subplot多合一显示...

【网络安全】-安全常见术语介绍

文章目录 介绍1. 防火墙&#xff08;Firewall&#xff09;定义通俗解释 2. 恶意软件&#xff08;Malware&#xff09;定义通俗解释 3. 加密&#xff08;Encryption&#xff09;定义通俗解释 4. 多因素认证&#xff08;Multi-Factor Authentication&#xff0c;MFA&#xff09;定…...

C语言给定数字0-9各若干个。你可以以任意顺序排列这些数字,但必须全部使用。目标是使得最后得到的数尽可能小(注意0不能做首位)

这个题目要求的输出是一串数字&#xff01;&#xff01;&#xff01; 不是下面&#xff1a;输入在一行中给出 10 个非负整数&#xff0c;顺序表示我们拥有数字 0、数字 1、……数字 9 的个数。整数间用一个空格分隔。10 个数字的总个数不超过 50&#xff0c;且至少拥有 1 个非…...

vue+elementUI的tabs与table表格联动固定与滚动位置

有个变态的需求&#xff0c;要求tabs左侧固定&#xff0c;右侧是表格&#xff0c;点击左侧tab&#xff0c;右侧表格滚动到指定位置&#xff0c;同时&#xff0c;右侧滚动的时候&#xff0c;左侧tab高亮相应的item 上图 右侧的高度非常高&#xff0c;内容非常多 常规的瞄点不适…...

鸿蒙4.0开发笔记之ArkTS语法基础之应用生命周期与页面中组件的生命周期(十六)

文章目录 一、应用生命周期二、生命周期函数定义三、生命周期五函数练习 一、应用生命周期 1、定义 应用生命周期就是代表了一个HarmonyOS应用中所有页面从创建、开启到销毁等过程的全生命周期。查看路径如下&#xff1a; Project/entry/src/main/ets/entryability/EntryAbili…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...