在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

remix-run/react-router

菜单

错误处理

相关源文件

React Router 中的错误处理提供了一个强大的系统来管理应用程序中的错误，无论它们是在路由、数据加载、表单提交还是组件渲染过程中发生的。本页面解释了 React Router 的错误处理机制如何工作以及如何在您的应用程序中有效地利用它们。

错误处理机制概述

React Router 提供了几种集成的错误处理方法

  1. 错误边界 - 捕获渲染过程中 JavaScript 错误的组件
  2. 路由错误元素 - 用于处理路由特定错误的专用 UI
  3. 错误处理钩子 - 用于访问和响应错误的工具
  4. 自动错误处理 - 内置对加载器和操作中抛出的错误的处理

来源

React Router 中的错误边界

React Router 的错误处理建立在 React 的错误边界概念之上，但扩展了它以支持路由特定功能。当路由中发生错误（在渲染、加载或操作过程中）时，React Router 会捕获它并渲染最近的错误边界 UI。

路由错误元素

路由可以使用以下任一方式定义自己的错误处理 UI：

  1. errorElement 属性 - 当发生错误时提供要渲染的 React 元素
  2. ErrorBoundary 组件 - 在发生错误时渲染的类组件或函数组件

来源

路由错误处理配置

当使用 ErrorBoundary 时，React Router 会将其内部转换为一个元素

来源

默认错误元素

当未指定错误元素时，React Router 会提供一个默认错误元素。这有助于开发，显示错误信息，但在生产环境中应替换为自定义错误元素。

来源

数据操作的错误处理

React Router 会自动处理加载器和操作中抛出的错误，捕获它们并渲染最近的错误边界。

加载器错误处理

当加载器抛出错误时，React Router 会：

  1. 捕获错误
  2. 将其与路由关联
  3. 渲染最近的错误边界，而不是正常的路由 UI

来源

操作错误处理

与加载器类似，操作错误也会被捕获，并导致错误边界渲染。

来源

使用 useRouteError 访问错误

useRouteError 钩子允许您访问当前路由中抛出的错误。

来源

路由层级中的错误冒泡

如果一个路由没有自己的错误处理，错误将冒泡到最近的具有错误处理的祖先路由。这会产生级联效应，允许集中式错误处理。

来源

这种实现可以在 `_renderMatches` 函数中看到，该函数负责查找要渲染的最高错误边界。

来源

RenderErrorBoundary 组件

React Router 错误处理的核心是 `RenderErrorBoundary` 组件。这是一个类组件，它：

  1. 在渲染过程中捕获错误
  2. 在发生错误时更新其状态
  3. 为子组件提供错误上下文
  4. 在 location 更改时重置

来源

特殊情况：Await 错误处理

React Router 还包含一个专门的错误边界，用于使用 `` 组件处理延迟数据中的错误。

AwaitErrorBoundary 组件处理在解析延迟数据中的 Promise 时发生的错误。

来源

错误响应与 JavaScript 错误

React Router 同时处理 JavaScript 错误（如 `Error` 实例）和从加载器/操作中抛出的 Response 对象。

isRouteErrorResponse 实用函数有助于区分这两种类型。

来源

错误处理的最佳实践

1. 战略性放置错误边界

在路由层级的关键点放置错误边界。

  1. 根级别：捕获应用中任何地方的意外错误。
  2. 功能级别：将错误隔离到特定部分。
  3. 关键组件级别：保护重要的 UI 元素。

来源

2. 利用路由错误元素

在路由层级的不同级别配置错误元素。

来源

3. 区分错误类型

使用 `useRouteError` 钩子来适当处理不同类型的错误。

来源

总结

React Router 提供了一个全面的错误处理系统，该系统：

  1. 捕获渲染、数据加载和操作处理过程中的错误。
  2. 允许在不同级别战略性地放置错误边界。
  3. 提供钩子和实用工具来访问和处理错误。
  4. 区分响应错误和 JavaScript 错误。
  5. 在导航过程中自动重置错误状态。

该系统创建了一种健壮且用户友好的方式来处理应用程序中的错误，确保用户在出现问题时不会遇到空白屏幕或晦涩的错误消息。

来源