Implement a protected /dashboard route in React Router

WHAT THIS TESTS: This question tests whether you understand declarative routing guards in React Router 7 and can separate authentication concerns from page components. Interviewers want to see if you know how to centralize authorization at the route level rather than sprinkling checks across individual pages. They are also checking if you understand the difference between public routes, authenticated routes, and role-based or permission-based routes, plus how to handle redirects without breaking the browser history stack.

A GOOD ANSWER COVERS: First, lift the auth state above the Routes component so it is available for all route decisions. Second, create a reusable ProtectedRoute wrapper component that accepts children and authorization requirements like roles or permissions. Third, inside ProtectedRoute, conditionally render either the children if authorized or the Navigate component with the replace prop pointing to a login or landing page if not. Fourth, preserve the intended location so you can redirect back after login by passing state to Navigate or reading location from the hook. Fifth, extend the pattern to support different levels like authenticated-only, role-based, or permission-based access by passing criteria as props to the wrapper.

COMMON WRONG ANSWERS: Redirecting inside useEffect with useNavigate is a red flag because it causes an extra render and flashes unauthorized content. Manually pushing to history or using window location breaks the declarative model and loses state. Checking auth inside every page component instead of at the route level creates duplication and makes it easy to forget a guard. Rendering nothing while checking auth causes a blank screen instead of a clear redirect. Using nested ternaries directly inside Routes instead of a named wrapper hurts readability.

LIKELY FOLLOW-UPS: How would you handle a user who deep-links to dashboard while logged out and then logs in? How do you avoid layout or navigation flicker during auth state loading? What if different routes need different roles or permissions? How do you test the ProtectedRoute component in isolation? Would you implement this differently in a framework like Next.js with middleware?

ONE CONCRETE EXAMPLE: Imagine an App component with useState for a user object. The Routes component sits below the state. You define a ProtectedRoute component that takes children and an optional requiredRole prop. If there is no user, it returns Navigate to slash with replace set to true. If there is a user but requiredRole is admin and the user role does not match, it returns Navigate to slash or to an unauthorized page. Otherwise it returns the children. Then in JSX, you wrap Dashboard inside ProtectedRoute and Admin inside ProtectedRoute with requiredRole set to admin. This keeps the route declarations readable and centralizes all access logic.