React Router - 如何在根路由中重用 errorElement 的布局？

Question

我正在使用 React Router v6，以下是我的路线：

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: '/sign-up',
        element: <SignUpPage />,
      },
      {
        path: '/log-in',
        element: <LogInPage />,
      },
    ],
  },
]);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

该App组件包含我的应用程序的布局并使用该组件输出路线元素Outlet。但是现在，如果有错误冒泡到根路由，那么ErrorPage会按预期显示，但它不会使用...的布局...那么，当显示错误页面时App，如何重用我的布局App？

Answer 1

当出现错误时，这是​​一种非此即彼的情况。要么条件良好，并且App组件被渲染，要么存在错误条件，并且ErrorPage组件被渲染。

您可以做的是将App组件的布局部分抽象为自己的布局组件，该组件可以渲染传递的childrenprop或Outlet嵌套路由的组件，并将其渲染并App包装ErrorPage组件。

例子：

const AppLayout = ({ children }) => (
  ...
  {children ?? <Outlet />}
  ...
);

const App = () => (
  ...
  <AppLayout />
  ...
);

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />, // <-- uses Outlet
    errorElement: (
      <AppLayout>     // <-- uses children
        <ErrorPage />
      </AppLayout>
    ),
    children: [
      {
        index: true,
        element: <HomePage />
      },
      {
        path: "/sign-up",
        element: <SignUpPage />
      },
      {
        path: "/log-in",
        element: <LogInPage />
      }
    ]
  }
]);