What's the correct type for error in useRouteError() from react-router-dom?

Question

I'm using the useRouteError() hook from react-router-dom in a React project to catch any errors that may occur during routing. However, I'm not sure what the correct type for the error object returned by this hook is.

Right now, I have declared the error as any in my component, which is not ideal. I'd like to declare the correct type for the error object to make my code more robust.

Can someone please tell me what the correct type is for the error object returned by useRouteError() in react-router-dom?

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 has a correct type of unknown since you can throw anything from your loaders or actions. You should use type narrowing to infer the error type as suggested by one of the maintainers of React Router.

Here is an example of how you can use the isRouteErrorResponse(error) helper method:
(Note how you don't need to explicitly set error to 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

Thanks, I have solved the error like this.

Added this in compiler option useUnknownInCatchVariables: true in 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