How do I implement route guards in React Router v6?

How do I implement route guards in React Router v6?

To implement route guards in React Router v6, you can create a custom component that checks for authentication before rendering the desired route.

Can you show me a code example of that?

Sure! Here's a simple example:

import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children, isAuthenticated }) => {
    return isAuthenticated ? children : <Navigate to="/login" />;
};

You can use this ProtectedRoute component to wrap your routes.

What if I want to protect multiple routes?

You can use the ProtectedRoute component for each route you want to guard. Just wrap them like this:

<Routes>
    <Route path="/dashboard" element={<ProtectedRoute isAuthenticated={user.isAuthenticated}><Dashboard /></ProtectedRoute>} />
    <Route path="/profile" element={<ProtectedRoute isAuthenticated={user.isAuthenticated}><Profile /></ProtectedRoute>} />
</Routes>