How can I customize error pages in my React app?

How can I customize error pages in my React app?

You can customize error pages in a React app by creating specific components for different error statuses, like 404 or 500.

Can you show me an example of a 404 error page component?

Sure! Here's a simple example:

const NotFound = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>Sorry, the page you are looking for does not exist.</p>
    </div>
  );
};

You can then use this component in your routing setup.

How do I integrate this with React Router?

You can integrate it by adding a route for the NotFound component at the end of your routes:

<Route path="*" component={NotFound} />

What about customizing the 500 error page?

You can create a similar component for the 500 error page, like this:

const ServerError = () => {
  return (
    <div>
      <h1>500 - Server Error</h1>
      <p>Oops! Something went wrong on our end.</p>
    </div>
  );
};

Then, you can handle server errors in your app accordingly.