React Router Dom: Implement a Not Found (404) Route

Last updated on January 12, 2022 A Goodman Loading... 2 comments

This article walks you through an end-to-end example of adding a custom 404 (Not Found, No Match) route to a React application that uses React Router 6 (the latest version).

Overview

In React Router 6 and newer, you can use a Route component with path=”*” to create a 404 route, like this:

<BrowserRouter>
   <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/contact" element={<ContactPage />} />

       {/* 404 rounte */}
       <Route path="*" element={<NotFoundPage />} />
   </Routes>
</BrowserRouter>

For more clarity, please see the example below.

The Complete Example

App Preview

The app we are going to build contains 2 real pages: HomePage and ContactPage. On HomePage, there are some links that let a user navigate to some other routes.

  • If the user clicks a link whose target route doesn’t exist, our 404 error page will show up.
  • If the user types a wrong address in the browser’s address bar, our 404 page will appear.

For more convenience, the 404 page also provides a link to help the user quickly go back to HomePage.

A demo is worth more than a thousand words:

The Code

Install React Router:

npm i react-router-dom

The full source code with explanations in App.js (we don’t care about other files):

// App.js
import React from "react";

// import things from react-router-dom
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div style={{ padding: 30 }}>
        <Routes>
          {/* 404 rounte */}
          <Route path="*" element={<NotFoundPage />} />
          <Route path="/" element={<HomePage />} />
          <Route path="/contact" element={<ContactPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

// HomePage
const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <hr />
      <p>
        {/* This rounte exists */}
        <Link to="/contact">Contact Page (this is a working route)</Link>
      </p>
      <p>
        {/* This rounte doesn't exist thus you will end up on the 404 page */}
        <Link to="/terms-of-service">
          Terms of Service (this route doesn't exist)
        </Link>
      </p>
      <p>
        {/* This rounte doesn't exist thus you will end up on the 404 page */}
        <Link to="/something-else">Kitty Puppy (this is a non-exist page)</Link>
      </p>
    </div>
  );
};

// Contact
const ContactPage = () => {
  return (
    <div>
      <h1>Contact Page</h1>
    </div>
  );
};

// A custom 404 page
const NotFoundPage = () => {
  return (
    <div>
      <h1 style={{ color: "red", fontSize: 100 }}>404</h1>
      <h3>Page Not Found</h3>
      <p>
        <Link to="/">Go Home</Link>
      </p>
    </div>
  );
};

export default App;

Conclusion

You’ve learned how to implement a 404 page with React Router v6. This knowledge can help boost the user experience of your React app. If you’d like to explore more new and fascinating stuff about modern React development, take a look at the following articles:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
Ngoako
Ngoako
2 months ago

Hey thanks for writing this. It was very helpful. I also found the article about dynamically changing a page’s title very useful🙂

Related Articles