Setting Error Page (404 Page) in React Router

In this article we'll see how to show an error page (404 page not found) with React Router.

Anytime your app throws an error while rendering, loading data, or performing data mutations, React Router will catch it and render an error screen. Default error screen in React Router is shown below.

You can create your own custom error page that should be displayed in case of any error.

Note in this article error page is created using the React Router V6.4 element 'errorElement' and the useRouteError() hook. This feature works only if you are using a data router like createBrowserRouter.

Creating error page component

If your app throws an error while rendering, loading data, or performing data mutations instead of the normal render path for your Routes (<Route element>), the error path will be rendered (<Route errorElement>) and the error made available with useRouteError.

In our error page we can use useRouteError() hook to access error and show message using that error object.

src\components\Routes\ErrorPage.js

This is the error page displayed in case of any error.

import { useRouteError } from "react-router-dom";

const ErrorPage = () => {
    const error = useRouteError();
    //console.log(error);
    return (
        <div>
          <p style={{color: "red", fontSize:"20px"}}>
            
            {error.status === 404 ? "404 Page Not Found" : ""}
            <br />
            {error.data}
          </p>
        </div>
    );
}

export default ErrorPage;

Since you have access to error object you can check the error status and return appropriate message as done here for '404' error status.

Setting errorPage using errorElement

src\components\Routes\route.js

import { createBrowserRouter } from "react-router-dom";
import About from "./about";
import ErrorPage from "./ErrorPage";
import Home from "./home";
import Navigation from "./navigation";

export const router = createBrowserRouter([
    {path: "/", element: <Navigation />, errorElement: <ErrorPage />,
     children: [
        {index: true, element: <Home /> },
        {path: "/about", element: <About />}
     ]
    },        
])

Notice the configuration of errorPage using errorElement in the parent route. You can also use the errorElement with specific routes.

Keeping errorElement with the parent route works for all the routes because errors will bubble up through parent routes when a route does not have an errorElement. Putting an errorElement at the top of your route tree gives you an opportunity to handle nearly every error in your app in one place.

Trying to access a non-existent page.

Please refer this post- React Router - NavLink in react-router-dom to get code for other Components like Navigation, Home and About.

That's all for the topic Setting Error Page (404 Page) in React Router. If something is missing or you have something to share about the topic please write a comment.

You may also like

KnpCode

October 30, 2023