How to setup 404 page in React Routing ?

Every Website needs a 404 page if the URL does not exist or the URL might have been changed. To set up a 404 page in the angular routing, we have to first create a component to display whenever a 404 error occurs. In the following approach, we will create a simple react component called PagenotfoundComponent. 

Prerequisites:

• NPM & Node JS
• React JS
• React-router-dom

Approach to setup 404 page in React Routing:

To setup 404 Page in React routing :

• First, create a PageNotFound component.
• Import this component to the app.js or where the routes are defined.
• Define routing for other pages first.
• In the last route component use * as the URL path for the 404 page.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app 404page

Step 2: After creating your project folder i.e. styled, move to the same folder:

cd styled

Step 3:  Installing react-router-dom: react-router-dom can be installed via npm in your React application. Follow the steps given below to install react-router-dom in your React application: To install the react-router-dom use the following command:

npm i --save react-router-dom

Project Structure:

Project Structure

The updated dependencies in package.json file.

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^5.3.4",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
},

Example : This example demonstrates the implementation of 404 page in react routing for react-router-dom v6.

Javascript

// Filename - App.js

import React from "react";
import {
    Route,
    Routes,
    BrowserRouter as Router,
} from "react-router-dom";
import Home from "./Home";
import PageNotFound from "./404Page";

function App() {
    return (
        <Router>
            <h1 style={{ color: "green" }}>
                GeeksForGeeks
            </h1>
            <h3>
                React Example to add 404 page in Routing
            </h3>

            <Routes>
                <Route exact path="/" element={<Home />} />
                <Route
                    path="*"
                    element={<PageNotFound />}
                />
            </Routes>
        </Router>
    );
}

export default App;

Javascript

// Filename - Home.js

import React from "react";

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

export default Home;

Javascript

// Filename - 404Page.js

import React from "react";

const PageNotFound = () => {
    return (
        <div>
            <h1>404 Error</h1>
            <h1>Page Not Found</h1>
        </div>
    );
};

export default PageNotFound;

Step to run the application: Run the following command to start the application:

npm start

Output: Now open the browser and go to http://localhost:3000, where everything is working fine. Now go to http://localhost:3000/anything, where we will get the 404 error as shown below.