export function CatchBoundary() not working

[B4TT3RY]

app/root.tsx

export function CatchBoundary() {
  let caught = useCatch()

  let message
  switch (caught.status) {
    case 401:
      message = <p>Oops! Looks like you tried to visit a page that you do not have access to.</p>
      break
    case 404:
      message = <p>Oops! Looks like you tried to visit a page that does not exist.</p>
      break

    default:
      throw new Error(caught.data || caught.statusText)
  }

  return (
    <Document title={`${caught.status} ${caught.statusText}`}>
      <Layout>
        <h1>
          {caught.status}: {caught.statusText}
        </h1>
        {message}
      </Layout>
    </Document>
  )
}

app/routes/login.tsx

import { ActionFunction, json, LoaderFunction, useCatch } from 'remix'
import { authenticator } from '~/services/auth.server'

export let loader: LoaderFunction = () => {
  throw new Response('Not Found', {
    status: 404,
  })
}

export let action: ActionFunction = async ({ request }) => {
  /* Login logic */
}

When accessing http://localhost:3000/login, it should be handled, but it comes out like the picture below.

Is there anything else I need to set up?

[hollandThomas]

login.tsx needs to render something. Something could even be null if that's what you want:

export default function Login() {
  return null;
}

[B4TT3RY]

thanks! it's working XD