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:
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:
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" }}> w3wiki </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.
Contact Us