Sooner or later, a user will visit a URL that doesn’t exist on your website. What the user does after this is up to you.

They might press the back button and leave your site. Instead, you can provide a useful 404 page to help them continue to navigate to your website.

For React websites, you can use React router to create a useful 404 not found page.

Creating a 404 Page

The 404 error occurs when you try to visit a page on a website that the server cannot find. As a developer, handling 404 errors means creating a page that the server uses as a replacement when it can’t find the requested page.

In React, you do this by creating a not found component that will render on routes that don’t exist.

This article assumes you already have a working React application with routing set up. If you don’t, create a React application and then install React Router.

Create a new file called NotFound.js and add the following code to create the 404 page.

import { Link } from "react-router-dom";
exportdefaultfunctionNotFound() {
return (
<div>
<h1>Oops! You seem to be lost.</h1>
<p>Here are some helpful links:</p>
<Link to='/'>Home</Link>
<Link to='/blog'>Blog</Link>
<Link to='/contact'>Contact</Link>
</div>
)
}

This 404 page renders a message and links to redirect a user to common pages on the website.

Routing to the 404 Page

You can create a normal route using React router like this:

import { Route, Routes } from "react-router-dom";
functionApp() {
return (
<Routes>
<Route path="/" element={ <Home/> }/>
</Routes>
)
}

You specify the URL path and the element you want to render at that route.

The 404 page displays for paths that don’t exist on the website. So, instead of specifying the path, use an asterisk (*).

<Route path='*' element={<NotFound />}/>

Using * renders the NotFound component for all the URLs not specified in routes.

Routing in React

You can easily create a 404 page for all URLs that don’t exist in your React web app using a router.

Browsers have a default 404 page but creating a custom one allows you to tell your users what went wrong and how they can fix it. You can also create a 404 page that fits into your brand.