How do I implement protected routes in React Router DOM?

How do I implement protected routes in React Router DOM?

To implement protected routes in React Router DOM, you can create a higher-order component that checks for authentication.

Can you show me an example of that higher-order component?

Sure! Here's a simple example:

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

const ProtectedRoute = ({ component: Component, isAuthenticated, ...rest }) => {
  return (
    <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 if I want to pass additional props to the protected component?

You can pass additional props by spreading them in the Component like this:

<Component {...props} additionalProp={value} />