Open In App
Related Articles

How to setup 404 page in React Routing ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:

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.


Peek-2023-12-01-12-41

Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads