Handling 404 page not found in React Router

avatar

Borislav Hadzhiev

Sat Apr 30 20222 min read

banner

Photo by Riccardo Mion

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.

Use the search field on my Home Page to filter through my more than 1,000 articles.