React Router Dom v6延迟数据错误处理问题求助

核心问题排查与修复 #

直接针对你遇到的问题给出可落地的解决方案：

1. 为什么useAsyncError()返回undefined？

大概率是两个原因：

• Promise拒绝值不是Error实例：React Router仅识别Error类型的拒绝，若直接抛普通对象/字符串，useAsyncError()无法捕获有效值。
• useAsyncError()调用位置错误：必须在<Await>指定的errorElement组件内部直接调用，不能嵌套在自定义Hook或父组件中。

正确示例：

// 专属错误组件，内部直接调用useAsyncError
function AwaitErrorView() {
  const error = useAsyncError();
  return <div className="error">加载失败：{error.message}</div>;
}

// 组件中使用<Await>
function DataRender() {
  const { data: dataPromise } = useLoaderData();
  return (
    <Await resolve={dataPromise} errorElement={<AwaitErrorView />}>
      {(data) => <div>加载成功：{data.content}</div>}
    </Await>
  );
}

2. 路由级错误边界捕获不到的错误？

不设置<Await>的errorElement时，错误会冒泡到最近的路由errorElement，但需满足两个条件：

• Promise拒绝的是Error实例（同上）
• 路由错误组件需做类型判断，避免访问不存在的属性导致崩溃

路由错误边界示例：

function GlobalErrorPage() {
  const error = useRouteError();
  
  // 先判断错误类型，防止类型错误
  if (error instanceof Error) {
    return <div>全局错误：{error.message}</div>;
  }
  
  // 处理非Error类型的错误（如网络原生错误）
  return <div>未知错误，请刷新重试</div>;
}

// 路由配置
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <GlobalErrorPage />,
    children: [
      { path: "data", element: <DataRender />, loader: dataLoader },
    ],
  },
]);

3. Loader中如何兼顾延迟数据和错误格式？

不需要在loader里await请求（否则失去延迟加载意义），直接返回未解析的Promise即可，同时在Promise内部处理错误，确保抛出Error实例（可自定义扩展状态码）。

正确Loader写法：

export function dataLoader() {
  // 直接返回Promise，不await，实现延迟加载
  return {
    data: fetch("/api/data")
      .then(async (res) => {
        if (!res.ok) {
          // 解析后端错误信息，抛出自定义Error
          const errData = await res.json();
          const customError = new Error(errData.message);
          customError.status = res.status; // 附加状态码
          throw customError;
        }
        return res.json();
      })
      .catch((err) => {
        // 兜底处理：确保所有错误都转为Error实例
        if (!(err instanceof Error)) {
          throw new Error(String(err));
        }
        throw err;
      }),
  };
}

额外注意点

• 不要在loader里用json()抛错误：json()是用来返回成功响应数据的，错误必须通过throw抛出，React Router才会识别并触发错误边界。
• 若需在错误组件中根据状态码做不同处理，可直接访问自定义Error的status属性：

  // 在错误组件中判断
  if (error.status === 403) {
    return <div>您没有访问权限，请登录</div>;
  }
  

内容的提问来源于stack exchange，提问作者Joelsome