How to setup 404 page in React Routing ?
Last Updated :
06 Dec, 2023
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
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
import React from "react" ;
const Home = () => {
return (
<div>
<h1>Home Page</h1>
</div>
);
};
export default Home;
|
Javascript
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.
Share your thoughts in the comments
Please Login to comment...