How do I implement protected routes in React Router?

How do I implement protected routes in React Router?

To implement protected routes in React Router, you can create a higher-order component that checks for authentication.

Can you show me an example of a protected route?

Sure! Here's a simple example:

import { Route, Redirect } from 'react-router-dom';

const ProtectedRoute = ({ component: Component, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to='/login' />
        )
      }
    />
  );
};

What if I want to protect multiple routes?

You can use the same ProtectedRoute component for multiple routes by passing different components and authentication states.

Is there a way to redirect users after login?

Yes! You can use the state prop in the Redirect component to send users back to their intended route after login.