How do I implement authentication with React Router?

How do I implement authentication with React Router?

To implement authentication with React Router, you can use a combination of context and protected routes. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

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

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

This PrivateRoute component checks if the user is authenticated before rendering the specified component.

What about handling login and logout?

For login and logout, you can create functions that update your authentication state. Use context or state management to handle user sessions.

Thanks! This is really helpful.