Creating an error page
In this section, we will understand how error pages work in React Router before implementing one in our app.
Understanding error pages
Currently, a React Router built-in error page is shown when an error occurs. We can check this by entering an invalid path in the running app:
Figure 6.10 – Standard React Router error page
An error is raised because no matching routes are found in the router. The 404 Not Found message on the error page confirms this.
This standard error page isn’t ideal because the information is targeted at a developer rather than a real user. Also, the app header isn’t shown, so users can’t easily navigate to a page that does exist.
As the error message suggests, an errorElement prop can be used on a route to override the standard error page. The following is an example of a custom error page defined for a customer’s route; if any error occurs on this route, the CustomersErrorPage...