How would you implement a basic protected route in React?

What's really being asked

The interviewer wants to see if you understand how to gate routes declaratively in React Router 7 without relying on brittle imperative hacks. At the senior level they also care whether you distinguish authentication from authorization and whether you think about state propagation across the router. They are listening for familiarity with modern Navigate patterns rather than legacy redirect APIs.

The full answer

First, auth state lives in a parent component using useState and a user object is passed as a prop into protected route components. Second, inside the protected component an early return renders React Router's Navigate component with the replace prop pointing to a public route such as login when the user is null or undefined. Third, a strong candidate notes that authorization can be more granular than authentication, for example requiring specific roles or permissions like analyze or admin before granting access. Fourth, mention that public routes such as Landing should remain unguarded so anonymous visitors can still access them. Fifth, acknowledge that the replace prop prevents the protected route from accumulating in browser history so the back button behaves correctly.

The mistakes people make

Using window.location.href or history.push directly instead of React Router's Navigate component breaks the declarative model and loses router state. Returning null or a loading spinner without redirecting traps the user on a blank screen. Forgetting the replace prop on Navigate pollutes the browser history so the back button cycles through protected routes instead of skipping them. Hardcoding auth checks separately in every page rather than centralizing the pattern also signals weak architectural thinking. Suggesting local storage checks inside the component without lifting state up can create sync bugs between tabs.

What usually comes next

How would you persist the login state across page refreshes? How would you redirect the user back to their originally requested page after they log in? How would you handle role-based access control for nested admin routes? What happens to protected data fetching if an unauthenticated user lands directly on a guarded URL? Would you extract the guard logic into a reusable PrivateRoute wrapper or keep it inline?

A concrete example

Imagine a dashboard route at slash dashboard. The App component holds const user and setUser from useState and passes user into the Dashboard element. The Dashboard component receives user as a prop. If user is falsy, the component returns Navigate to equals slash login replace equals true. Otherwise it renders the dashboard UI. This mirrors the pattern shown in React Router 7 tutorials where Landing stays public but Home and Dashboard require an authenticated user, while Analytics might require an additional permission.