默认二级路由（React-Router 6）

场景和配置方式

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

 

// ./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: [// 设置为默认二级路由 一级路由访问的时候，它也能得到渲染{index: true,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;

同时一级路由组件里面的对应的二级路由 组件路径也需要更改，如下图