An auth guard with redirect back after login
initialEntries={["/", "/account"]} starts as if the user came from Home and opened /account. The guard redirects to /login with from. After login, the user lands on /account, and logging out makes the guard redirect again at once. Try the My account link before and after logging in.
Protect pages by redirecting logged-out users to a login page with <Navigate> (or redirect in a loader) and sending them back afterwards; load route code only when it's needed; and do what a full page load did for free: reset or restore scroll, move keyboard focus to the new content, and update the page title.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make an AdminOnly layout route that lets through users with role === "admin", sends logged-out users to /login, and shows Not allowed (no redirect) to logged-in non-admins.
Write a safeFrom(value) function that returns value only if it's a local path, otherwise "/", and test it with "/orders", "//evil.example" and "https://evil.example".
Give three pages a React 19 <title> and log document.title after clicking between them in a memory router.
Explain it without notes
How do you build a protected route in React Router, and why use replace?
Why is a client-side auth guard not a security boundary?
How do lazy routes work in declarative and data mode, and what does the user see while code loads?
What must an SPA do after navigation that a full page load did automatically?
Preview
Console
Nothing logged yet.Expected console output
start: /login | Log in
after login: /account | Account of Asha
after logout: /login | Log in