Handling 404 page not found in React Router

# Handling 404 page not found in React Router

Use a wildcard placeholder to handle 404 page not found in React router, e.g. <Route path="*" element={<PageNotFound />} />.

A route that has an asterisk path * serves as a catch-all route. It only matches when no other routes do.

App.js

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

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* 👇️ Link to catch all route */}
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />

          {/* 👇️ Only match this when no other routes match */}
          <Route path="*" element={<PageNotFound />} />
        </Routes>
      </div>
    </div>
  );
}

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

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

function PageNotFound() {
  return (
    <div>
      <h2>404 Page not found</h2>
    </div>
  );
}

react router page not found

The code for this article is available on GitHub

We used a no match route.

App.js

Copied!
{/* 👇️ Only match this when no other routes match */}
<Route path="*" element={<PageNotFound />} />

The * wildcard syntax can only be used at the end of a path.

The route that has a path equal to * serves as a catch-all route. It only matches when no other routes do.

If the user navigates to / or /about, they will get the component that we set for these routes, however, if they navigate to any other page, they would get the PageNotFound component.

# Make sure your application is wrapped in a Router component

When using React router hooks, make sure to wrap your application in a Router component in your index.js file.

index.js

Copied!
import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ Wrap the App in a Router
root.render(
  <Router>
    <App />
  </Router>
);

The code for this article is available on GitHub

The best place to wrap your React app with a Router component is in your index.js file because that's the entry point of your React application.

Once your entire app is wrapped with a Router component, you can use any of the hooks from the React router package anywhere in your components.

# Handling 404 pages with a redirect in React Router

An alternative way to handle "404 page not found" in React Router is to redirect the user to a different page when they try to go to a page that doesn't exist.

App.js

Copied!
import React from 'react';
import {Route, Link, Routes, Navigate} from 'react-router-dom';

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* 👇️ Link to catch all route */}
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />

          {/* 👇️ Only match this when no other routes match */}
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    </div>
  );
}

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

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

react router not found page redirect

The code for this article is available on GitHub

In the example, instead of rendering a PageNotFound component, we redirect the user to / if they go to a route that doesn't exist.

App.js

Copied!
<Route path="*" element={<Navigate to="/" />} />

We used the Navigate element to redirect the user to / every time they go to a route that doesn't have any matches.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Handling 404 page not found in React Router