Explain Protected Routes and Route Guards in React

58 / 100

Routingintermediate

Protected Routes and Route Guards

Learn how to restrict access to certain routes based on authentication or authorization state.

Protected routes (or route guards) prevent unauthenticated or unauthorized users from viewing certain parts of an app, redirecting them elsewhere (typically a login page) instead. In React Router, this is commonly implemented as a wrapper component that checks authentication state and either renders its children/<Outlet /> or a <Navigate> redirect, rather than as a built-in router feature.

A protected route is like a security checkpoint before a restricted floor in a building — everyone attempting to reach that floor passes through the checkpoint (the guard component) first, and only those with valid credentials (authenticated state) are allowed through to continue to their original destination, while everyone else is redirected to the front desk (login page).

Key Concepts

A typical pattern wraps a group of routes that all require authentication under a single <ProtectedRoute> layout-style route, checking useAuth()'s authenticated state once and rendering an <Outlet /> for any of the nested child routes if authenticated, or a <Navigate to="/login" /> if not — avoiding the need to duplicate the check in every individual protected page component.

<ProtectedRoute>useAuth()<Outlet /><Navigate to="/login" />

A detail worth getting right is preserving the originally requested URL (often via the state passed to <Navigate> or a redirect query parameter) so that after a successful login, the app can send the user back to the page they originally tried to visit rather than dropping them at a generic default page.

state<Navigate>redirect

Interviewers frequently ask candidates to implement a <ProtectedRoute> wrapper component from scratch, checking whether they correctly use <Navigate> (a declarative redirect component) rather than imperative navigation inside a render, and whether they think to preserve the originally intended destination for a post-login redirect.