与React路由器一起使用react错误边界

Question

我们正在尝试使用react边界(v6)，但似乎需要用一个错误边界包装每个路由元素，如下所示

import { ErrorBoundary } from "react-error-boundary";

export const AppRoutes = createBrowserRouter([
{
   path: "/",
   element: <ErrorBoundary FallbackComponent={GlobalError}><Login /></ErrorBoundary>
},
{
  path: "login",
  element: <ErrorBoundary FallbackComponent={GlobalError}><Login /></ErrorBoundary>,
},
{
  path: "trans",
  element: <ErrorBoundary FallbackComponent={GlobalError}><Trans /></ErrorBoundary>
),
{
  path: "*",
  element: <ErrorBoundary FallbackComponent={GlobalError}><RouteNotFound /></ErrorBoundary>
}]);

我们有更简单的方法这样做吗？响应路由器中的任何配置标志都会出现错误。

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary FallbackComponent={GlobalError}>
  <Header />
    <RouterProvider router={AppRoutes} />
  <Footer />
</ErrorBoundary>

下面是在错误边界中包装RouterProvider时所得到的错误的屏幕截图

​

​

下面是Trans组件抛出错误的示例代码。

export function Trans() {
  const [error, setError] = useState(null);

  if (error) {
    throw error;
  }

  useEffect(() => {
    setTimeout(() => setError("This is error"), 2000);
   }, []);

  return <p>This is Trans</p>;
} 

Answer 1

代码片段应该可以工作，但是如果您想使代码更多地使用干燥，那么您可以创建一个布局路由，以呈现由ErrorBoundary组件包装的Outlet组件，而不是单独包装每个路由。

示例：

import { createBrowserRouter, Outlet } from 'react-router-dom';
import { ErrorBoundary } from "react-error-boundary";

const ErrorBoundaryLayout = () => (
  <ErrorBoundary FallbackComponent={GlobalError}>
    <Outlet />
  </ErrorBoundary>
);

export const AppRoutes = createBrowserRouter([
  {
    element: <ErrorBoundaryLayout />,
    children: [
      {
        path: "/",
        element: <Login />,
      },
      {
        path: "login",
        element: <Login />,
      },
      {
        path: "trans",
        element: <Trans />,
      },
      {
        path: "*",
        element: <RouteNotFound />,
      },
    ],
  },
]);

您应该注意这的反应错误边界：

Note 错误边界是而不是捕获以下错误：

• 事件处理程序(了解更多信息)
• 异步代码(例如setTimeout或requestAnimationFrame回调)
• 服务器端呈现
• 在错误边界本身抛出的错误(而不是其子边界)

在Trans组件示例中，您正在使用setTimeout设置某些错误状态。我只能猜测，这里的思维过程可能是一些错误被认为是“不可恢复的”，因此错误边界会进入并处理它，否则在上述点中发生的错误被认为是“可恢复的”，并且您的组件代码应该被编码以处理异步问题的场景，比如失败的获取请求等等。