React-嵌套路由 二级路由

什么是嵌套路由？

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

嵌套路由配置

实现步骤

配置二级路由 children嵌套

import Login from "../page/Login/index";
import Home from "../page/Home/index";
import Web from "../page/web/index";
import Back from "../page/back/index";

import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/home/:name/:id",
    element: <Home></Home>,
    children: [
      {
        path: "web",
        element: <Web></Web>,
      },
      {
        path: "back",
        element: <Back></Back>,
      },
    ],
  },
]);
export default router;

 渲染  使用<Outlet/>组件

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

const Home = () => {
  return (
    <div style={{display:"flex"}}>
      <div>
        <div>
          <Link to="web">前端</Link>
          </div>
        <div>
          <Link to="back">后端</Link>
          
          </div>
      </div>
      <div>
        <Outlet></Outlet>
      </div>
    </div>
  )
};
export default Home;

默认二级路由

什么是二级路由？

当我们访问一级路由时，默认的二级路由可以得到渲染，只需在二级路由位置去掉path，设置index属性为true

去掉path，设置index属性为true

import Login from "../page/Login/index";
import Home from "../page/Home/index";
import Web from "../page/web/index";
import Back from "../page/back/index";

import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/home",
    element: <Home></Home>,
    children: [
      {
        index:true,
        element: <Web></Web>,
      },
      {
        path: "back",
        element: <Back></Back>,
      },
    ],
  },
]);
export default router;

注意: 使用默认二级路由点击时需要直接使用/

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

const Home = () => {
  return (
    <div style={{display:"flex"}}>
      <div>
        <div>
          <Link to="/">前端</Link>
          </div>
        <div>
          <Link to="back">后端</Link>
          
          </div>
      </div>
      <div>
        <Outlet></Outlet>
      </div>
    </div>
  )
};
export default Home;