Setup 404 Page in React Routing

Creating a 404 page is essential for any website to handle cases where a URL does not exist or may have been modified. To set up a 404 page in React, we'll create a component to display whenever a 404 error occurs. Here's how you can set up a PageNotFound component in React with react-router-dom.

Prerequisites

• NPM & Node.js
• React
• React Router

Approach for Setting Up a 404 Page in React Routing

Adding a 404 page is crucial for improving the user experience by guiding users when they encounter broken or incorrect URLs. If you're learning React, our ReactJS Course includes practical lessons on setting up custom error pages, helping your applications handle navigation errors smoothly.

Steps to Set Up a 404 Page in React Routing

• Create a PageNotFound component - This component will display the 404 error message.
• Import the component into App.js or wherever your routes are set up.
• Define other page routes before the 404 route.
• For the last route, use * as the URL path to catch any unmatched routes and render the 404 page.

Creating a React Application and Installing Required Modules

Step 1: Create a React Application

Use the following command to set up a new React project.

npx create-react-app TutorialPoints404Error

Step 2: Navigate to the Project Folder

Move into the project directory.

cd TutorialPoints404Error

Step 3: Install react-router-dom

Install react-router-dom to enable routing in your React application.

npm install react-router-dom

Project Structure

Your project will have a basic structure similar to this.

Example package.json Dependencies

Your package.json file should reflect these dependencies after setting up.

"dependencies": {
  "@testing-library/jest-dom": "^6.1.3",
  "@testing-library/react": "^14.0.0",
  "@testing-library/user-event": "^15.6.0",
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "react-router-dom": "^6.15.0",
  "react-scripts": "^6.0.0",
  "web-vitals": "^3.4.0"
}

Implementation Example

Below is an example of how to implement a 404 page in React Router (version 6).

App.js

// Filename - App.js

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

function App() {
  return (
    <Router>
      {/* Header section for app branding */}
      <header style={{ textAlign: "center", padding: "1rem", backgroundColor: "#f0f0f0" }}>
      <h1 style={{ color: "green" }}>
        Hello, Tutorial Points
      </h1>
      <h3>
        This is a React Example for Adding a 404 Page in Routing
      </h3>
      </header>
      {/* Main Home route */}
      <Routes>
        <Route exact path="/" element={} />
      {/* Wildcard route for 404 Page */} 
        <Route
          path="*"
          element={<PageNotFound />}
        />
      </Routes>
    </Router>
  );
}

export default App;

Home.js

// Filename - Home.js
import React from "react";

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

export default Home;

404ErrorPage.js

// Filename - 404ErrorPage.js
import React from "react";

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

export default PageNotFound;

Running the Application

To start your React application, use the following command.

npm start

Testing the 404 Page

After the app starts, open your browser and navigate to http://localhost:3000 to see the home page. If you enter an invalid URL, such as http://localhost:3000/invalid, the 404 page should appear, displaying the error message.

• On - http://localhost:3000
  
  
• On - http://localhost:3000/invalid
  
  

This setup ensures a 404 page is displayed for any route that doesn't match an existing path, providing a smooth user experience.