How can I implement authentication in a React Router application?

How can I implement authentication in a React Router application?

You can implement authentication in a React Router app by using protected routes and context for managing user state.

What are protected routes and how do I create them?

Protected routes are components that only render if the user is authenticated. You can create them by wrapping your routes in a component that checks the authentication status.

Can you show me a code example for a protected route?

Sure! Here's a simple example:

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

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

This component checks if the user is authenticated and either renders the component or redirects to the login page.

What about handling login and logout?

You can handle login by setting the authentication state in your context or state management solution, and for logout, simply clear that state.