React 18 Router DOM Custom 404 Page Template Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

In general, 404 is a status code that occurs when you visit a web page that does not exist. Ideally, the user is redirected to a custom 404 page, which informs that the requested page is no longer available.

If you want to set up a custom 404 page template in React. Then this guide is for you.

In this tutorial, you will learn how to build a custom 404 page template in React JS application using React Router DOM v6 package.

This comprehensive guide will help you analyse and evaluate: how to properly install and set up the router dom library in React.

How to create react router dom 404 page template in React. How to resolve a 404 error in React using router dom APIs.

How to make the 404 route component and redirect to the 404 page when the requested page doesn’t exist using Astrix * symbol.

Create React Environment

The first course of action would be to install or add node and npm to your development machine.

We can use the above packages to create the react application; here is the command that needs to be evoked.

npx create-react-app react-blog

cd react-blog

Set Up Router DOM in React

You need to install the react-router library so that you can effortlessly enable the routing for navigation within the React app.

npm i react-router-dom --legacy-peer-deps

Go to src/index.js file; you require to import and wrap the app App component with BrowserRouter module.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Create Function Components

After the previous step is done, we need a couple of functional components for creating the no-page found route.

First, create the components/ folder and Home.js file within the folder.

import React from 'react'

function Home() {
  return (
    <div>Home page</div>
  )
}

export default Home

Secondly, create the components/ folder and Contact.js file into the directory.

import React from 'react'

function Contact() {
  return (
    <div>Contact page</div>
  )
}

export default Contact

And, finally, build the components/ directory and Template404.js file with give code.

import React from 'react'

function Template404() {
  return (
    <div>Template404 page</div>
  )
}

export default Template404

Create React 404 Template Component

You will need Routes, Route, and Link modules to set up routing in React.

You also need to import the components that help us create the feature.

Use the Link component to set up routes and the * sign redirects to page no found component when the broken url is accessed.

Update code into the src/App.js file:

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

import Template404 from "./components/Template404";
import Contact from "./components/Contact";
import Home from "./components/Home";

function App() {
  return (
    <div>
      <h2>React Custom 404 Template Page Example</h2>

      <div>
        <Link to="/">Home</Link>
      </div>

      <div>
        <Link to="/contact">Contact</Link>
      </div>
      <div>
        <Link to="/page-not-found">Obselete Route</Link>
      </div>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Contact />} />
        <Route path="*" element={<Template404 />} />
      </Routes>
    </div>
  );
}

export default App;

Test React Application

The npm start command orders react application server to invoke and open the app on the browser.

npm start

http://localhost:3000

Conclusion

A 404 error is also known as ‘page not found.

It is an error that belongs to Hypertext Transfer Protocol standard response code. It vindicates the server was unable to find what was initially requested.

However, it makes a wrong impact on the user who visits the web page and finds it broken.

To increase the user-engagement chances, we redirect the user to another page. That’s where handling 404 routes in React comes into play.

When you are done with this tutorial, you will be able to make a 404 page in React.

Have a fundamental understanding of how to redirect to the custom 404 component with basic routing in React.

Not just that, but also comprehend the react-router-dom library and its basic usage in React.