react-router-dom v6配置默认子路由

午虎~~

于 2024-08-27 10:34:03 发布

阅读量262

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/this_star/article/details/141596233

版权

有两种方式，实现起来相差不大。

第一种

适用于父路由为主路由表。父路由path设置为'/'，子路由path也设置为'/'。初次加载进入路由地址会默认显示path为'/'的子路由。

如果父路由path部位'/'，使用这种方法报错

const routerObj: RouteType[] = [
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "/",
        // index:true,
        element: PageLoading(<Page1 />),
        title: "page1",
        icon: <GoldFilled />,
        auth: false,
      },
      {
        path: "page2",
        element: PageLoading(<Page2 />),
        title: "Page2",
        icon: <SnippetsFilled />,
        auth: false,
      },
    ],
  },
];

第二种，官方推荐

第二种方法是正规方法，也是官方推荐的写法。与第一种写法区别很小，只需要把子路由path删除，新增index属性，值为true。

这种默认子路由写法不受父路由path限制。

推荐使用第二种。这种情况下，可以将默认子路由看成父路由，路由跳转时也需要跳转路径填写为父路由地址(毕竟默认子路由没有path)。

const routerObj: RouteType[] = [
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        // path: "/",
        index:true,
        element: PageLoading(<Page1 />),
        title: "page1",
        icon: <GoldFilled />,
        auth: false,
      },
      {
        path: "page2",
        element: PageLoading(<Page2 />),
        title: "Page2",
        icon: <SnippetsFilled />,
        auth: false,
      },
    ],
  }
];