Handling 404 page not found in React Router

avatar

Borislav Hadzhiev

Last updated: Apr 30, 2022

banner

Photo from Unsplash

Handling 404 page not found in React Router #

Use a wildcard placeholder to handle 404 page not found in React router, e.g. <Route path="*" element={<PageNotFound />} />. A route that has an asterisk path * serves as a catch all route. It only matches when no other routes do.

App.
import React from 'react'; import {Route, Link, Routes} from 'react-router-dom'; export default function App() { return ( <div> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> {/* 👇️ link to catch all route */} <Link to="/does-not-exist">Catch all route</Link> </li> </ul> </nav> <Routes> <Route path="/about" element={<About />} /> <Route path="/" element={<Home />} /> {/* 👇️ only match this when no other routes match */} <Route path="*" element={<PageNotFound />} /> </Routes> </div> </div> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function PageNotFound() { return ( <div> <h2>404 Page not found</h2> </div> ); }

react router page not found

We used a no match route.

App.js
{/* 👇️ only match this when no other routes match */} <Route path="*" element={<PageNotFound />} />

The * wildcard syntax can only be used at the end of a path.

The route that has a path equal to * serves as a catch all route. It only matches when no other routes do.

If the user navigates to / or /about, they would get the component that we set for these routes, however, if they navigate to any other page, they would get the PageNotFound component.

An alternative way to handle 404 page not found in React router is to redirect the user to a different page when they try to go to a page that doesn't exist.
App.js
import React from 'react'; import {Route, Link, Routes, Navigate} from 'react-router-dom'; export default function App() { return ( <div> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> {/* 👇️ link to catch all route */} <Link to="/does-not-exist">Catch all route</Link> </li> </ul> </nav> <Routes> <Route path="/about" element={<About />} /> <Route path="/" element={<Home />} /> {/* 👇️ only match this when no other routes match */} <Route path="*" element={<Navigate to="/" />} /> </Routes> </div> </div> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; }

react router not found page redirect

In the example, instead of rendering a PageNotFound component, we redirect the user to / if they go to a route that doesn't exist.

App.js
<Route path="*" element={<Navigate to="/" />} />

We used the Navigate element to redirect the user to / every time they go to a route that doesn't have any matches.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.