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;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【JavaEE初阶】死锁问题

目录 一、死锁的三种典型场景 1、一个线程&#xff0c;一把锁 2、两个线程&#xff0c;两把锁 3、N个线程&#xff0c;M把锁 死锁&#xff0c;是多线程代码中的一类经典问题。我们知道加锁是能解决线程安全问题的&#xff0c;但是如果加锁的方式不当&#xff0c;就可能产生死…

品味丰富美食,羊大师温暖心灵

品味丰富美食&#xff0c;羊大师温暖心灵 冬季来临&#xff0c;寒冷的天气让人们渴望寻找一种温暖和满足感&#xff0c;这时候美食便成了一种心灵享受。冬季与美食的结合&#xff0c;使得人们在寒冷的冬日也能感受到温暖与欢乐。本文小编羊大师将带大家领略冬季与美食的完美结…

PAT-10道题

PAT算法刷题 1002 1002 一&#xff1a;对于每一的1到6都进行枚举&#xff0c;进行递归操作 二&#xff1a;如果位数到了指定的n的时候&#xff0c;递归的条件&#xff0c;进行判断是否可以整除操作 #include<iostream> #include<algorithm> using namespace std; l…

c语言十进制转二进制

以下是一个将十进制数转换为二进制数的C语言代码示例&#xff1a; #include <stdio.h>void decimal_to_binary(int decimal) { int binary[32]; int i 0; while (decimal > 0) { binary[i] decimal % 2; decimal / 2; i; } pr…

zookeeper集群+kafka集群:

kafka3.0之前依赖于zookeeper。 zookeeper开源&#xff0c;分布式的架构。提供协调服务&#xff08;Apache项目&#xff09; 基于观察者模式涉及的分布式服务管理架构。 存储和管理数据。分布式节点上的服务接受观察者的注册。一旦分布式节点上的数据发生变化&#xff0c;由zoo…

工作时想摸鱼?不如背点单词冷静一下

今天给大家分享一款新发现的“摸鱼”神器「ToastFish」。 这个软件相当神奇&#xff0c;它可以让我们在用电脑时安全隐蔽地——背单词&#xff01; 是的&#xff0c;工作累了&#xff0c;打游戏乏了&#xff0c;背两个单词&#xff0c;既能放松&#xff0c;又能提高&#xff0c…

linux 之iptables

1.iptables防火墙基本介绍 Linux系统的防火墙&#xff1a;IP信息包过滤系统&#xff0c;它实际上由两个组件 netfilter和 iptables 组成。 主要工作在网络层&#xff0c;针对IP数据包。体现在对包内的IP地址、端口、协议等信息的处理上。 iptables由软件包iptables提供的命令…

交叉熵损失函数(Cross-Entropy Loss Function)

交叉熵损失函数&#xff08;Cross-Entropy Loss Function&#xff09; 在处理机器学习或深度学习问题时&#xff0c;损失/成本函数用于在训练期间优化模型。目标几乎总是最小化损失函数。损失越低&#xff0c;模型越好。交叉熵损失是最重要的成本函数。它用于优化分类模型。对…

设计好的测试用例,6大注意事项

设计好的测试用例对于发现缺陷、验证功能、提高可靠性、降低风险和提高效率都具有重要的作用&#xff0c;是保证产品质量和稳定性的重要环节。如果测试用例有问题&#xff0c;可能会导致遗漏缺陷、功能验证不充分、测试效率低下以及误报漏报等问题&#xff0c;从而影响项目的质…

Jira Software最新版本(9.11.2)安装

软件获取 Jira Software 历史版本下载地址&#xff1a;Jira Server 下载存档 | Atlassian Atlassian-agent.jar https://github.com/haxqer/confluence/releases/download/v1.3.3/atlassian-agent.jar MySQL 驱动包 MySQL :: Download MySQL Connector/J (Archived Versio…

mybatis项目中添加logback日志

1、pom.xml <dependencies><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId></dependency><!-- MySQL驱动 mybatis底层依赖jdbc驱动实现,本次不需要导入连接池,mybatis自带! --><dependency&g…

uniapp 连接斑马PDA调试

1、先把PDA设置成开发者模式 打开设置--》关于手机 --》单击版本号&#xff0c;5次以上 连线单击5次以上 2、后退--》找到系统 --》高级 3、打开 --》开发都模式 4、找到调试 --》 打开USB调试 5、设置USB偏好设置&#xff0c;插入电脑连接PDA就会在通知栏上显示&#xff0c;默…

排序算法基本原理及实现1

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 &#x1f4d1;插入排序 &#x1f4…

量子力学应用:探索科技前沿的奇幻之旅

量子力学应用:探索科技前沿的奇幻之旅 引言 量子力学,这门探讨微观世界规律的学科,自其诞生以来就充满了神秘与奇幻。随着科学技术的不断进步,量子力学已经从纯理论研究走向了实际应用领域,为我们打开了一个全新的科技世界。在本文中,我们将深入探讨量子力学的应用方面,…

NX二次开发UF_CURVE_create_arc_tangent_point_point 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_create_arc_tangent_point_point Defined in: uf_curve.h int UF_CURVE_create_arc_tangent_point_point(tag_t tangent_object, tag_t point1, tag_t point2, UF_CURVE_he…

SpringBoot项目发送邮件

&#x1f4d1;前言 本文主要是【SpringBoot】——SpringBoot项目发送邮件的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f3…

字节内部前端开发手册(完整版),开放下载!

不同于其他&#xff0c;工程师真的是一个终身学习的行业&#xff0c;尤其是前端领域&#xff0c;知识杂且多、网上资料还良莠不齐&#xff0c;想要靠自己梳理清楚确实不容易。 这里给大家分享一份由字节3-1前端面试官整理的「2023大厂前端面试手册」&#xff0c;内容囊括Html、…

从零开始:PHP实现阿里云直播的简单方法!

1. 配置阿里云直播的推流地址和播放地址 使用阿里云直播功能前&#xff0c;首先需要在阿里云控制台中创建直播应用&#xff0c;然后获取推流地址和播放地址。 推流地址一般格式为&#xff1a; rtmp://{Domain}/{AppName}/{StreamName}?auth_key{AuthKey}-{Timestamp}-{Rand…

Springboot 使用 阿里的 druid 连接池 启用 wall sql防火墙的情况下怎么支持多sql同时执行?

1、问题如上&#xff0c;看了不少网上的文章&#xff0c;在我这都不生效&#xff0c;网上主要的解决思路有两个。 第一个是&#xff1a;去掉配置文件中的 wall filter # 修改之前 spring.datasource.druid.filtersstat,wall,log4j# 修改之前 spring.datasource.druid.filte…

天眼销:B端销冠的私藏宝藏!

在B端销售的业务场景下&#xff0c;获取客户的联系方式是绕不开的一个话题&#xff0c;并且也有很多销售有自己的经验。 怎么去获取企业客户呢&#xff1f;你肯定想我得找到企业基本的信息还有联系方式&#xff0c;这时候你可能会想到去知名的查查平台。然后你会发现&#xff…
最新文章