React Router 6 使用加载器时在元素中显示错误

Question

如果加载资源时出现错误，我尝试在同一页面上显示错误消息。但是，当使用 loader 和 errorElement 时，用户会被带到另一个页面。我怎样才能做到这一点，以便在我的组件上显示错误而不将用户重定向到新的组件/视图？

我正在做的事情的例子：

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

我已经尝试了几件事。

当我执行示例中的操作时，用户将被重定向到 errorComponent。如果应用程序出现致命错误，那就没问题，但如果应用程序出现 422 错误，那就不行了。在这种情况下，我希望出现错误警报/小吃。

我还尝试使用相同的组件来解决该错误。这没有加载我正在寻找的错误消息。

Answer 1

如果您愿意，您可以指定errorElement特定路线。这errorElement是一种用于路线加载的“错误边界”，当出现错误时，会渲染正在加载的路线上或上方最接近的边界。

例子：

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
        errorElement: <ContactErrorPage />, // <-- specific to route
        loader: contactLoader,
      },
    ],
  },
]);