How do I implement authentication redirects in React Router?

How do I implement authentication redirects in React Router?

To implement authentication redirects in React Router, you can use the Redirect component along with a custom route.

Can you show me a code example?

Sure! Here's a simple example:

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

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

This PrivateRoute component checks if the user is authenticated and redirects to the login page if not.

What if I want to pass some state to the login page?

You can pass state to the Redirect component like this:

<Redirect to={{ pathname: '/login', state: { from: props.location } }} />

This way, you can access the from state in your login component.