Handling page-not-found (404) errors
We can also handle thrown responses in the root ErrorBoundary
component. One special case that can only be handled in the root ErrorBoundary
component is the page-not-found exception thrown by Remix. Let’s revisit the root error boundary to handle thrown responses at the root level:
- Run BeeRich on localhost by executing
npm
run dev
. - Visit a non-existing page such as http://localhost:3000/cheesecake in a new browser window.
When visiting a non-existing route, Remix throws a response with HTTP status code 404 at the root level. We can use
isRouteErrorResponse
to render a 404 page using the root error boundary. - Open the
root.tsx
file in an editor. - Import
isRouteErrorResponse
from Remix:import { isRouteErrorResponse, Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useRouteError,} from '@remix-run/react';
- Update...