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.

1. 404 page using a wildcard path with an asterisk(‘*’)
2. 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.