React Router DOM Custom 404 Page Template Example

404 is a status code that is shown on our screen when we visit a web page that does not exist. In this React tutorial, we will learn how to build a custom 404 page template in React Js application using React Router DOM v6 package.

 

How To Create DOM 404 Page Template In React.

Step 1- Create React Environment

The primary step is to install the Node and NPM on our development system.

We will use the below command for doing so:

npx create-react-app react-blog

cd react-blog

 

Step 2- Set Up Router DOM In React

We have to install the react-router library so that we can enable the routing for navigation within the React app:

npm i react-router-dom

Then, we go to the src/index.js file; we need to import and wrap the app component with the 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>
);

 

Step 3- Create Function Component

Here, we will create the function component for creating the no-page found route.

Firstly, we have to 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, we will 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

Then, finally, we have to build the components/ directory and Template404.js file with the code:

import React from 'react'
function Template404() {
  return (
    <div>Template404 page</div>
  )
}
export default Template404

 

Step 4- Create React 404 Template Component

We will need Routes, Route and Link Modules to set up routing in React.

We also have to import the components that help us create the feature.

We will use the Link Component to set up routes and the * sign redirects to page no fond component when the broken url is accessed.

Afterward, we will update the given code in 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;

 

Step 5- Test React App

We will use the given command for starting the React app on the browser:

npm start

 

Conclusion

In this React tutorial, we have learned how to make a 404 page in React js application. The steps to be followed were quite easy and simple to follow.

 

Thanks