How do I implement authentication in a React app using react-router-dom?

How do I implement authentication in a React app using react-router-dom?

To implement authentication, you can use the react-router-dom library to manage routes and protect them based on user authentication status.

What are the steps to set up protected routes?

First, create a context for authentication, then use a PrivateRoute component to wrap your protected routes.

Can you show me an example of a PrivateRoute component?

Sure! Here's a simple example:

import { 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' />
      )
    )} />
  );
};