嵌套路由配置（React-Router5）

什么是嵌套路由

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

嵌套路由配置

实现步骤：

1. 使用 children 属性配置路由嵌套关系

2. 使用 `<Outlet/>` 组件配置二级路由渲染位置

 

// 一级路由组件  page/Layout/index.jsimport { Outlet, Link } from "react-router-dom";const Layout = () => {return (<div>我是一级路由layout组件<Link to="/board">面板</Link><Link to="/about">关于</Link>{/* 配置二级路由的出口 */}<Outlet></Outlet></div>);
};export default Layout;

// 二级路由组件 page/About/index.jsconst About = () => {return <div>我是关于页</div>;
};export default About;// 二级路由组件 page/Board/index.js
const Board = () => {return <div>我是面板</div>;
};export default Board;

// ./router/index.jsimport Login from "../page/Login";
import Article from "../page/Article";
import Layout from "../page/Layout";
import Board from "../page/Board";
import About from "../page/About";
import { createBrowserRouter } from "react-router-dom";const router = createBrowserRouter([{
// 路由嵌套path: "/",element: <Layout></Layout>,children: [{path: "board",element: <Board></Board>,},{path: "about",element: <About></About>,},],},{path: "/login",element: <Login></Login>,},{// searchParams 传参// path: "/article",// params 传参path: "/article/:id/:name",element: <Article></Article>,},
]);export default router;

效果图如下：