How can I implement route guards in a React application?

How can I implement route guards in a React application?

You can implement route guards in React using the react-router library. You can create a higher-order component (HOC) that checks user authentication before rendering a route.

Can you show me a code example of a route guard?

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

What if I want to protect multiple routes?

You can use the same PrivateRoute component for multiple routes by wrapping each route with it. Just pass the component you want to protect as a prop.

Are there any libraries that can help with route guarding?

Yes, libraries like react-router and redux-auth-wrapper can help manage route guarding and authentication flows more easily.