How to Create a 404 Page in React: Simple Guide

To create a 404 page in React, use React Router to define a catch-all route with path='*' that renders your 404 component. This component shows a friendly message when users visit a URL that does not match any defined route.

Syntax

Use React Router to define routes in your app. The 404 page is created by adding a route with path='*' at the end of your routes. This route catches all unmatched URLs and renders the 404 component.

• Routes: Container for all route definitions.
• Route: Defines a path and the component to render.
• path='*': Matches any URL not matched by previous routes.
• element: The React component to show for that route.

jsx

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
      <Route path='*' element={<NotFound />} />
    </Routes>
  );
}

Example

This example shows a simple React app with three routes: Home, About, and a 404 page. The 404 page appears when the user visits any unknown URL.

jsx

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function NotFound() {
  return (
    <div>
      <h2>404 - Page Not Found</h2>
      <p>Sorry, the page you are looking for does not exist.</p>
      <Link to='/'>Go back Home</Link>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to='/'>Home</Link> | <Link to='/about'>About</Link>
      </nav>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Output

When visiting '/' shows 'Home Page'. When visiting '/about' shows 'About Page'. When visiting any other URL, shows '404 - Page Not Found' with a link back home.

Common Pitfalls

• Placing the 404 route path='*' before other routes causes it to catch all URLs, so other routes never render.
• Not wrapping routes inside BrowserRouter will cause routing to fail.
• Using Switch instead of Routes is legacy; always use Routes in React Router v6 and above.

jsx

/* Wrong: 404 route placed first, catches all URLs */
<Routes>
  <Route path='*' element={<NotFound />} />
  <Route path='/' element={<Home />} />
</Routes>

/* Right: 404 route placed last */
<Routes>
  <Route path='/' element={<Home />} />
  <Route path='*' element={<NotFound />} />
</Routes>

Quick Reference

• Use BrowserRouter to enable routing.
• Define your normal routes first inside Routes.
• Add a final route with path='*' to catch unmatched URLs.
• Create a friendly 404 component to show helpful info.
• Use Link for navigation to keep SPA behavior.

Key Takeaways

Use React Router's path='*' route to create a 404 page that catches all unmatched URLs.

Always place the 404 route last to avoid blocking other routes.

Wrap your routes inside BrowserRouter for routing to work.

Create a clear and friendly 404 component with navigation back to valid pages.

Use Routes and Route from React Router v6 for modern routing.