A protected route restricts access to part of an application based on authentication or permissions. Examples include: ```text /dashboard /account /admin /settings ``` A user who does not satisfy the requirement should normally be redirected or shown an appropriate access-denied UI. ### Basic Authentication Guard Suppose your application already knows whether the user is authenticated. ```jsx function ProtectedRoute({ user }) { if (!user) { return ; } return ; } ``` The guard can wrap multiple routes: ```jsx } /> }> } /> } /> } /> ``` Conceptually: ```text User visits /dashboard ↓ ProtectedRoute checks user / \ yes no ↓ ↓ Dashboard Login ``` ### Why Use Outlet? The protected wrapper represents a parent route. When access is allowed: ```jsx return ; ``` renders whichever protected child route matched. ### Role-Based Protected Routes Authentication answers: ```text Is there a logged-in user? ``` Authorization answers: ```text Is this user allowed to perform this action? ``` For example: ```jsx function AdminRoute({ user }) { if (!user) { return ; } if (user.role !== "admin") { return ; } return ; } ``` Then: ```jsx }> } /> ``` ### Preserve the Requested Location A better login experience often remembers where the user intended to go. ```jsx import { Navigate, Outlet, useLocation } from "react-router"; function ProtectedRoute({ user }) { const location = useLocation(); if (!user) { return ( ); } return ; } ``` After successful login, the application can navigate back to the requested route. ### Avoid Flashing Protected Content During Authentication Loading Authentication may not be known immediately. For example: ```text authLoading = true user = temporarily null ``` Do not automatically treat that as logged out. ```jsx function ProtectedRoute({ user, loading }) { if (loading) { return

Checking authentication...

; } if (!user) { return ; } return ; } ``` ### Client Route Protection Is Not Security This is critical. A [React](/courses/reactjs) route guard can hide an admin page from unauthorized users, but users can still manually send HTTP requests to your backend. Therefore: ```text React route guard → protects navigation and UI experience Backend authorization → protects actual data and operations ``` For example, the backend must still reject an unauthorized request such as: ```text DELETE /api/users/123 ``` even if [React](/courses/reactjs) hides the Delete button and `/admin` route. ### Data and Framework Modes Modern [React Router](/courses/reactjs) also supports authorization at the route-data level. Loaders or route middleware can check sessions and redirect before protected route data is returned. That approach is especially important when authentication is enforced by a server-backed session. ### Interview-Ready Answer A protected route checks whether a user satisfies authentication or authorization requirements before rendering protected content. In a declarative client-side router, a guard can render an `` when access is allowed and redirect when it is denied. Authentication loading should be handled separately, and backend APIs must independently enforce authorization because client-side route protection is not a security boundary.