什么是嵌套路由？

在一級路由中又內嵌了其他路由，這種關系就叫做嵌套路由，嵌套至一級路由內的路由又稱作二級路由

嵌套路由配置

實現步驟

配置二級路由 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;