How do I implement authentication in React Router v5?

How do I implement authentication in React Router v5?

To implement authentication in React Router v5, you can use a combination of context and private routes.

Can you show me an example of a private route?

Sure! A private route can be created like this:

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

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

What about handling login and logout?

For login, you can create a login function that sets the authentication state. For logout, simply clear the authentication state.