react-router-dom中useRouteError()返回的error正确类型是什么？

问题 #

在React项目里用react-router-dom的useRouteError()捕获路由错误时，当前把error声明为any类型，想换成正确的类型来提升代码健壮性，示例代码如下：

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

const ErrorPage: React.FC = () => {
  const error: any = 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

解决方案 #

react-router-dom内置了**RouteError**类型，专门用于useRouteError()的返回值，直接从库中导入即可使用。这个类型包含了路由错误场景下的常见属性（如status、statusText），同时兼容原生Error类型的message等属性。

修改后的代码：

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

const ErrorPage: React.FC = () => {
  const error = useRouteError() as RouteError;
  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

如果你的项目有自定义错误属性的需求，可以扩展RouteError类型：

type CustomRouteError = RouteError & {
  customMessage?: string;
};

// 使用时
const error = useRouteError() as CustomRouteError;

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