How can I implement authentication in a React app with routing?

How can I implement authentication in a React app with routing?

You can use React Router for routing and a state management solution like Context API or Redux for authentication.

What are the steps to set up protected routes?

First, create a higher-order component (HOC) that checks if a user is authenticated. Then, wrap your protected routes with this HOC.

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 }) => (
  <Route {...rest} render={props => (
    isAuthenticated ? <Component {...props} /> : <Redirect to='/login' />
  )} />
);

What about handling login and logout?

For login, you can create a login form that updates the authentication state. For logout, simply clear the authentication state and redirect to the login page.