Open In App
Related Articles

How to setup 404 page in React Routing ?

Like Article
Save Article
Report issue

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


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.


// Filename - App.js
import React from "react";
import {
    BrowserRouter as Router,
} from "react-router-dom";
import Home from "./Home";
import PageNotFound from "./404Page";
function App() {
    return (
            <h1 style={{ color: "green" }}>
                React Example to add 404 page in Routing
                <Route exact path="/" element={<Home />} />
                    element={<PageNotFound />}
export default App;



// Filename - Home.js
import React from "react";
const Home = () => {
    return (
            <h1>Home Page</h1>
export default Home;



// Filename - 404Page.js
import React from "react";
const PageNotFound = () => {
    return (
            <h1>404 Error</h1>
            <h1>Page Not Found</h1>
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.


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