How do I handle 404 pages in React Router with TypeScript?

How do I handle 404 pages in React Router with TypeScript?

To handle 404 pages in React Router with TypeScript, you can create a NotFound component and use it in your routes.

Can you show me an example of the NotFound component?

Sure! Here's a simple example:

const NotFound: React.FC = () => {
  return <h1>404 - Page Not Found</h1>;
};

How do I integrate this NotFound component into my routes?

You can add it as a fallback route at the end of your route definitions:

<Switch>
  {/* other routes */}
  <Route component={NotFound} />
</Switch>

What if I want to redirect users to the home page instead?

You can use the Redirect component from React Router to redirect users:

<Route path='*' component={() => <Redirect to='/' />} />