React嵌套路由的使用及操作代码

一、嵌套路由

嵌套路由是指在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由。嵌套至一级路由内的路由又称作二级路由。

二、实现步骤

1. 使用children属性配置路由嵌套关系
2. 使用<Outlet/>组件配置二级路由渲染的位置

三、操作代码

1. 路由文件配置（router/index.tsx）

import Login from "../page/Login";
import Home from "../page/Home";
import Layout from "../page/Layout";
import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/login",
        element: <Login />
      },
      {
        path: "/home",
        element: <Home />
      }
    ]
  },
]);

export default router;

2. 布局页面（page/Layout.tsx）

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <div>
      我是一级路由layout组件
      <Link to="/home">首页</Link>
      <Link to="/login">登录</Link>
      {/* 配置二级路由的出口 */}
      <Outlet />
    </div>
  );
};

export default Layout;

3. 页面组件示例

Home.tsx

import { Link } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <h2>首页内容</h2>
      <Link to="/home/child">子页面</Link>
    </div>
  );
};

export default Home;

ChildPage.tsx（二级路由页面）

const ChildPage = () => {
  return (
    <div>
      <h3>子页面内容</h3>
    </div>
  );
};

export default ChildPage;

4. 更新路由配置（router/index.tsx）

import Login from "../page/Login";
import Home from "../page/Home";
import Layout from "../page/Layout";
import ChildPage from "../page/ChildPage";
import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/login",
        element: <Login />
      },
      {
        path: "/home",
        element: <Home />,
        children: [
          {
            path: "/home/child",
            element: <ChildPage />
          }
        ]
      }
    ]
  },
]);

export default router;

四、说明

1. children属性：用于定义嵌套路由，它会将子路由嵌套在父路由的element组件中。
2. <Outlet/>组件：在父组件（如Layout）中使用，它会渲染子路由匹配到的组件。
3. 路由匹配：

• 当访问/home时，会渲染Layout组件和Home组件
• 当访问/home/child时，会渲染Layout组件、Home组件和ChildPage组件

4. 嵌套路由的层级：可以有多级嵌套，只需在children中继续添加嵌套路由配置即可。

五、使用注意事项

1. 嵌套路由的路径需要包含父级路径，如/home/child而不是/child，否则无法正确匹配。
2. 如果需要在子路由中保持父级路由的布局，需要在父级路由组件中包含<Outlet/>。
3. 使用createBrowserRouter（React Router v6+）时，嵌套路由的配置方式与v5不同，需要使用children属性。
4. 路由嵌套层级不宜过深，以免造成路由配置复杂和维护困难。