React Custom Page Not Found (404) Component Tutorial

React 404 page not found example. 404 is a response status code informing web users that the requested page doesn’t exist.

Ideally, if the server doesn’t find that requested page when you visit a particular URL, then the HTTP 404 Not found message shows. It tells the requested resource is missing or the link is broken.

In this tutorial, we will teach you how to create a dynamic 404 page not found component in React js application using React route dom version 6 library.

To add a custom 404 page not found functionality in React, we will be using the asterisk * symbol.

This is the simplest way to retrieve all the URLs that don’t exist. It will help us handle a 404 page not found an issue or broken URLs or paths in React app.

Create React Project

If you haven’t created the React project yet, go ahead and run the suggested command:

npx create-react-app my-react-app

Jump to the subsequent step, if already done.

Step inside the project directory:

cd my-react-app

Install Router DOM v6 Package

Here in this step, we will do the most important thing. That is to add the router dom library to React; for that execute the given command.

npm install react-router-dom

Make Component Files

Go ahead and create features/ folder:

Next, create the Dashboard.js file with given content:

import React from 'react'

function Dashboard() {
  return (
    <div></div>
  )
}

export default Dashboard

Then, make the Profile.js file with provided code:

import React from 'react'

function Profile() {
  return (
    <div></div>
  )
}

export default Profile

Eventually, create the NotFound404.js file with given content:

import React from 'react'

function NotFound404() {
  return (
    <div></div>
  )
}

export default NotFound404

Implement 404 Page in React

To set up the routing and page not found feature in react; move into the App.js file and paste the following code into the file.

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

import Dashboard from "./features/Dashboard";
import Profile from "./features/Profile";
import NotFound404 from "./features/NotFound404";

function App() {
  return (
    <div className="container mt-5">
      <div>
        <h2 className="mb-3">React 404 Page Not Found Example</h2>
        <nav>
          <ul>
            <li>
              <Link to="/">Dashboard</Link>
            </li>
            <li>
              <Link to="/profile">Profile</Link>
            </li>
            <li>
              <Link to="/broken-route">Get All Route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/profile" element={<Profile />} />

          <Route path="*" element={<NotFound404 />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

Run React Server

Head over to the console, add the command on the console, after that execute the command and view the app on the browser with given url.

npm start
http://localhost:3000

React Custom Page Not Found (404) Component Tutorial

Conclusion

In this detailed tutorial, we have ascertained how to create a no-match route in React with the route dom v6 library. We created the no-match route using the asterisk symbol, allowing us to handle 404 pages not found in React.

Simply, it can redirect to any custom page when the user visits a broken URL or a path that no longer exists in React.