Create 404 page in react
To create a 404 page in React using React Router, create a wildcard path with an asterisk(‘*’) and add it to the very last path of our routes.
A 404 page is a user sees when they try to load a non existing URL on our site. This may be because of user clicked on a broken link or they have mistyped a URL. We can provide useful navigation or links on the 404 page which helps the user continue on the website. React Router is used to map URL paths to React components.
In this article, we are going to implement a 404 page using React Router.
We have two methods to set up 404 page in React.
- 404 page using a wildcard path with an asterisk(‘*’)
- Redirect to the sitename.com/404 path
Before going to start, Install React Router in the React project using the below command.
npm install react-router-dom@6
404 page using a wildcard path with an asterisk(‘*’)
Show Page Not Found content in the requested URL is the best way to handle 404 requests. For this use wildcard path with an asterisk(*) at the end of the routes. Using * renders the PageNotFound
component for all the URLs not specified in the routes. Let us explain with below sample code.
Note: Before using the below code, please make sure you are using React Router V6 or the latest version.
import React from 'react';
import {Route, Link, Routes} from 'react-router-dom';
export default function App() {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
<Route path="*" element={<PageNotFound />} />
</Routes>
</>
);
}
function Home() {
return <p>Home</p>;
}
function Contact() {
return <p>Contact</p>;
}
function PageNotFound() {
return (
<div>
<p>404 Page not found</p>
</div>
);
}
If a user navigates to / or /contact, the corresponding component that we set for the routes, will get rendered. however, if a user navigates to any non existing URLs, the PageNotFound component will be rendered. Because we have given <Route path="*" element={<PageNotFound />} />
at the end of routes to catch no matching route in the routes list.
Redirect to sitename.com/404 path
Here we are redirecting the user to another page(in the below example we are redirecting to the home page) instead of rendering the PageNotFound component. For this, we are using Navigate component imported from the react-router-dom. Given below is a sample code for implementing this.
import React from 'react';
import {Route, Link, Routes, Navigate} from 'react-router-dom';
export default function App() {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
<Route path="/404" element={<PageNotFound />} />
<Route path="*" element={<Navigate to="/404" />} />
</Routes>
</>
);
}
function Home() {
return <p>Home</p>;
}
function Contact() {
return <p>Contact</p>;
}
function PageNotFound() {
return (
<div>
<p>404 Page not found</p>
</div>
);
}
Conclusion
To implement a 404 page not found in the react application with React Router, use a wildcard path with an asterisk(‘*’) and add it to the very last path of our routes with <PageNotFound/>
as the element. Or we can redirect to sitename.com/404 path using the Navigate component imported from the react-router-dom.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
Build password strength checker in React
React Hook is Called Conditionally
ERESOLVE unable to resolve dependency tree error when installing npm packages
Warning: The tag is unrecognized in this browser
How to create a scroll to top button in React
Call multiple functions onClick in React
Too many re-renders. React limits the number of renders to prevent an infinite loop
Only one default export allowed per module
How to pass event and parameter onClick in React
Explore All Blogs