默认子路由和子路由错误页面

默认子路由

警告

设置 index:true

• 新建一个 index.jsx 文件，作为默认子路由

function IndexPage() {
  return <div>默认页面</div>;
}

export default IndexPage;

• 在路由中配置

const router = createBrowserRouter([
  // 2. 路由配置
  {
    path: "/",
    element: <LayOut></LayOut>,
    errorElement: <ErrorPage></ErrorPage>,
    children: [
      // 配置默认子路由
      {
        index: true,
        element: <IndexPage></IndexPage>,
      },
      {
        path: "/page1",
        element: <Page1></Page1>,
      },
      {
        path: "/page2",
        element: <Page2></Page2>,
        loader: page2Loader,
      },
      {
        path: "/page2/:id",
        element: <Page2></Page2>,
        loader: page2Loader,
        action: page2Action,
      },
    ],
  },
]);

export default router;

子路由错误页面

警告

设置 errorElement:

• 新建一个 ErrorPage.jsx 文件，作为子路由错误页面

function ErrorPage() {
  return <div>子路由错误页面</div>;
}

export default ErrorPage;

• 在路由中配置

const router = createBrowserRouter([
  // 2. 路由配置
  {
    path: "/",
    element: <LayOut></LayOut>,
    errorElement: <ErrorPage></ErrorPage>,
    children: [
      {
        index: true,
        element: <IndexPage></IndexPage>,
      },
      {
        path: "/page1",
        element: <Page1></Page1>,
      },
      {
        path: "/page2",
        element: <Page2></Page2>,
        loader: page2Loader,
      },
      {
        path: "/page2/:id",
        element: <Page2></Page2>,
        loader: page2Loader,
        action: page2Action,
        errorElement: <ErrorPage></ErrorPage>,
      },
    ],
  },
]);