How To Create A 404 Page In React Using React Router

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.

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:

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 (*).

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.