How do I implement protected routes in React Router v6?

How do I implement protected routes in React Router v6?

To implement protected routes in React Router v6, you can create a custom component that checks for authentication.

Can you show me an example of the code for that?

Sure! Here's a simple example:

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

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

You can use this component to wrap your protected routes.

What if I want to redirect to a specific page after login?

You can pass a state prop to the Navigate component to redirect users back to their intended page after login.