Example 404 not found page with splat route

[58bits]

Hi All,

We're brand new to Remix. After having read quite a bit of the documentation, one of the 'speed bumps' we ran into was creating a custom 'catch all' 404 page. We then discovered the suggestions here at the end of the routing documentation - https://remix.run/docs/en/v1/guides/routing#splats - suggesting that a splat route be used to create a custom 404 page.

From this we believe that a splat route ensures that the loader and render of root.tsx will all occur as normal.

Once we understood this - we came up with the following... in $.tsx

import { useCatch } from '@remix-run/react'

/**
 * meta
 * @returns MetaFunction
 */
export const meta = () => ({
  title: '404 - Page Not Found - Infonomic Remix Workbench App',
})

/**
 * loader
 * @returns Response 404 not found
 */
export async function loader() {
  /**
   * Using the top level splat route here allows us to throw a
   * 'correct' 404 response - which is handled by the CatchBoundary
   * below. This in turn means that our root.tsx loader and
   * App/Document components will succeed - including our theme
   * provider settings. So we'll get a proper 'theme-able'
   * 404 not found page that we can customize in the CatchBoundary.
   **/

  // eslint-disable-next-line @typescript-eslint/no-throw-literal
  throw new Response('Not Found', { status: 404 })
}

/**
 * CatchAll
 * @returns ReactNode
 */
export default function CatchAll() {
  /** 
   * This should never happen, since the loader above will
   * always throw Response('Not Found', { status: 404 })
   * which is caught by the CatchBoundary below.
   **/
  return <p>Not found.</p>
}

/**
 * CatchBoundary
 * @returns ReactNode | Error
 */
export function CatchBoundary() {
  const caught = useCatch()
  if (caught.status === 404) {
    return (
     <div>
        <h1>404</h1>
        <p>Oops. The page you tried to visit does not exist.</p>
     </div>
    )
  }

  throw new Error(`Unexpected caught response with status: ${caught.status}`)
}

Our question is does this look okay? (in our 'real' $.tsx page we style the 404 page).

If generally speaking this is correct, we'd be glad to submit a pull request with updated docs and an example at the end of the 'Routing' documentation.

Thanks for the cool framework and Happy New Year!

[58bits]

Hm. So I've just gone back and re-read a handful of release notes, including the 1.8 release notes - and it appears that Remix framework 404 not found errors (i.e. router errors) will get thrown into a top-level CatchBoundary (like in root.tsx)- and so maybe a 'spat route' handler is not necessary?

https://github.com/remix-run/remix/releases/tag/remix%401.8.0

Under "Making thrown Response objects less ambiguous"...

There is one exception to this rule, which is that framework-detected 404 responses will continue to go to the CatchBoundary since users should have one single location to handle 404 displays.