Create a custom 404 Page for your React Project

Steps to create and route to a custom 404 Page — using Switch Router & Route — in React

Photo by Jonny Gios on Unsplash

I was developing a React project for the course in Udemy and had to create and route to a 404 page if the url is not found.

This is my component implementation:

This is how the page looks like:

Not Found Page

This is how I placed the 404 component in routing:

There was also a case in “/questions” as you could send a questionId as a path parameter. In a case where given questionId does not exist, you should also direct to a 404 page:

if (!question) {
  return <NotFoundPage />;
}

This is my final project if you would like to have a look at:

GitHub - nilseri01/udacity-would-you-rather-react: Would You Rather App with React

This is also a nice post to read:

How to create custom 404 error page in react js

Photo by Jon Tyson on Unsplash

Happy Coding!