Protected Routes in React

Protected Routes in React — a practical guide to React protected routes with clear examples you can reuse in real projects.

React Tutorial Series (47/103). Prefer one article? Read the complete React tutorial.

Short description

Redirect unauthenticated users to login; preserve return URL.

Protected route idea

function Protected({ children }) {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return children;
}