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

最终效果

点击 to test1

点击to test2 => to test21

点击to test2 => to test22

代码如下

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

父组件如下

javascript 复制代码
   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组件

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

test2组件

javascript 复制代码
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组件

​​​​​​​

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

test22组件

javascript 复制代码
import React from "react";
const Test22 = () => {
  return <div> I am test22</div>;
};
export default Test22;
相关推荐
AI_Auto1 天前
AI Agent系列(八) -基于ReAct架构的前端开发助手(DeepSeek)
人工智能·react·ai agent
YiHanXii2 天前
Axios 相关的面试题
前端·http·vue·react
百锦再3 天前
Reactive编程:应用场景和传统比较
运维·开发语言·javascript·python·flask·react·tornado
冴羽yayujs5 天前
SvelteKit 最新中文文档教程(12)—— 高级路由
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
shmily_yyA6 天前
Nextjs15 - 什么是CSR、SSR、SSG和ISR
前端·react
小周不摆烂6 天前
React 揭秘:从新手到高手的进阶之路
前端框架·react
渴望成为python大神的前端小菜鸟7 天前
2025前端面试题(vue、react、uniapp、微信小程序、JS、CSS、其他)
前端·javascript·vue.js·面试·微信小程序·uni-app·react
冴羽yayujs11 天前
SvelteKit 最新中文文档教程(6)—— 状态管理
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
任磊abc16 天前
在react当中利用IntersectionObserve实现下拉加载数据
前端·react·observer·下拉加载·intersection
HaanLen18 天前
React19源码系列之createRoot的执行流程是怎么的?
react·react19源码