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;