来自react-router-dom的useRouteError()错误的正确类型是什么？

Question

我在React项目中使用react-router-dom中的useRouteError()钩子来捕获路由期间可能发生的任何错误。但是，我不确定此挂钩返回的错误对象的正确类型是什么。

现在，我已将错误声明为组件中的任何错误，这并不理想。我想声明错误对象的正确类型以使我的代码更加健壮。

有人可以告诉我react-router-dom中useRouteError()返回的错误对象的正确类型是什么吗？

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

const ErrorPage: React.FC = () => {
  const error: any = useRouteError() // Add appropriate type here
  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

Answer 1

useRouteError有一个正确的类型，unknown因为你可以从加载器或操作中抛出任何东西。您应该按照 React Router 的维护者之一的建议，使用类型缩小来推断错误类型。

以下是如何使用isRouteErrorResponse(error)辅助方法的示例：（
请注意，您不需要显式地将错误设置为unknown）

import React from 'react';
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';

const ErrorPage: React.FC = () => {
  // you don't need to explicitly set error to `unknown`
  const error = useRouteError();
  let errorMessage: string;

  if (isRouteErrorResponse(error)) {
    // error is type `ErrorResponse`
    errorMessage = error.error?.message || error.statusText;
  } else if (error instanceof Error) {
    errorMessage = error.message;
  } else if (typeof error === 'string') {
    errorMessage = error;
  } else {
    console.error(error);
    errorMessage = 'Unknown error';
  }

  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>{errorMessage}</i>
      </p>
    </div>
  );
};

export default ErrorPage;

Answer 2

谢谢，我已经解决了这样的错误。

useUnknownInCatchVariables: true在 中的编译器选项中添加了此内容tsconfig。

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

const ErrorPage: React.FC = () => {
  const error: unknown = 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 as Error)?.message ||
            (error as { statusText?: string })?.statusText}
        </i>
      </p>
    </div>
  )
}

export default ErrorPage