React Router DOM 中的 useRouteError 钩子：常见错误类型及处理

2024-03-04 15:32:11

理解 React Router DOM 中 useRouteError 的错误类型

在 React 应用程序中，路由是至关重要的，因为它允许我们根据 URL 呈现不同的组件。然而，在路由过程中，例如在加载组件时发生 404 错误或服务器故障，可能会发生错误。为了优雅地处理这些错误，React Router DOM 提供了 useRouteError 钩子。

useRouteError 钩子

useRouteError 钩子返回一个表示当前路由错误的对象。该错误对象的类型为 NavigationFailure，它是 Error 的子类，包含有关路由错误的详细信息。

NavigationFailure 类型

NavigationFailure 类型扩展了 Error 类型，并提供了有关路由错误的附加信息。它具有以下属性：

status: 一个数字，表示 HTTP 状态代码（如果可用）。
statusText: 一个字符串，表示与 HTTP 状态代码关联的文本（如果可用）。
message: 一个字符串，提供有关错误的简要。
name: 一个字符串，始终为 "NavigationFailure"。

在组件中使用 NavigationFailure 类型

为了在组件中正确使用 NavigationFailure 类型，可以将其声明为错误对象的类型。例如：

import { useRouteError } from 'react-router-dom'

const ErrorPage: React.FC = () => {
  const error: NavigationFailure = useRouteError()
  return (
    <div
      id='error-page'
      className='flex flex-col gap-8 justify-center items-center h-screen'
    >
      <h1 className='text-4xl font-bold'>Oops!</h1>
      <p>Sorry, an unexpected error has occurred.</p>
      <p className='text-slate-400'>
        <i>{error.statusText || error.message}</i>
      </p>
    </div>
  )
}

export default ErrorPage