CatchNotFound Component

The CatchNotFound component is a component that catches not-found errors thrown by its children, renders a fallback component and optionally calls the onCatch callback. It resets when the pathname changes.

The CatchNotFound component accepts the following props:

• Type: React.ReactNode
• Required
• The component's children to render when there is no error

• Type: (error: NotFoundError) => React.ReactElement
• Optional
• The component to render when there is an error

• Type: (error: any) => void
• Optional
• A callback that will be called with the error that was thrown by the component's children

• Returns the component's children if there is no error.
• Returns the fallback if there is an error.

import { CatchNotFound } from '@tanstack/react-router'

function Component() {
  return (
    <CatchNotFound
      fallback={(error) => <p>Not found error! {JSON.stringify(error)}</p>}
    >
      <ComponentThatMightThrowANotFoundError />
    </CatchNotFound>
  )
}

import { CatchNotFound } from '@tanstack/react-router'

function Component() {
  return (
    <CatchNotFound
      fallback={(error) => <p>Not found error! {JSON.stringify(error)}</p>}
    >
      <ComponentThatMightThrowANotFoundError />
    </CatchNotFound>
  )
}