How to Create a 404 Page in Remix: Simple Guide

In Remix, create a custom 404 page by exporting a CatchBoundary component in your route file. This component catches 404 errors and renders your custom message or UI when a page is not found.

Syntax

To create a 404 page in Remix, you use the CatchBoundary export in your route module. This special component catches thrown responses like 404 and lets you render a custom UI.

Inside CatchBoundary, you use the useCatch() hook to get the caught response and check its status code.

Example parts:

• export function CatchBoundary(): The component Remix calls on errors.
• const caught = useCatch(): Hook to access error info.
• Check caught.status === 404 to show your 404 message.

jsx

import { useCatch } from "@remix-run/react";

export function CatchBoundary() {
  const caught = useCatch();

  if (caught.status === 404) {
    return <h1>Page Not Found (404)</h1>;
  }

  throw new Error("Unexpected error: " + caught.status);
}

Output

When a user visits a non-existent page, the app shows: "Page Not Found (404)"

Example

This example shows a full Remix route file with a custom 404 page. When a user visits a missing page, the CatchBoundary displays a friendly message and a link back home.

jsx

import { useCatch, Link } from "@remix-run/react";

export default function SomeRoute() {
  return <div>Welcome to this route!</div>;
}

export function CatchBoundary() {
  const caught = useCatch();

  if (caught.status === 404) {
    return (
      <div style={{ textAlign: "center", marginTop: "2rem" }}>
        <h1>Oops! Page Not Found (404)</h1>
        <p>The page you are looking for does not exist.</p>
        <Link to="/">Go back home</Link>
      </div>
    );
  }

  throw new Error(`Unexpected error: ${caught.status}`);
}

Output

Displays a centered message: "Oops! Page Not Found (404)" with a link labeled "Go back home" when a missing page is visited.

Common Pitfalls

• Not exporting CatchBoundary in the route file means Remix will show its default error page.
• Forgetting to check caught.status === 404 can cause wrong messages for other errors.
• Throwing errors inside CatchBoundary without handling them can crash your app.
• Not providing navigation back to a valid page can confuse users.

jsx

/* Wrong: Missing CatchBoundary export */
export default function Route() {
  return <div>Content</div>;
}

/* Right: Export CatchBoundary to handle 404 */
import { useCatch } from "@remix-run/react";

export function CatchBoundary() {
  const caught = useCatch();
  if (caught.status === 404) {
    return <h1>Page Not Found</h1>;
  }
  throw new Error("Unexpected error");
}

Quick Reference

Concept	Description
CatchBoundary	Special export to catch thrown responses like 404
useCatch()	Hook to get caught response details inside CatchBoundary
caught.status	HTTP status code to check for 404 or others
Custom UI	Render friendly message or navigation for 404 pages
Throw errors	Throw unexpected errors to avoid silent failures

Key Takeaways

Export a CatchBoundary component in your Remix route to handle 404 errors.

Use the useCatch() hook inside CatchBoundary to check if the status is 404.

Render a friendly message and navigation inside CatchBoundary for better user experience.

Always handle unexpected errors by throwing inside CatchBoundary to avoid silent crashes.

Without CatchBoundary, Remix shows a default error page for missing routes.