Lazy route, pending link, page title and focus (data router)
The reports code downloads only on the first visit. Meanwhile useNavigation and NavLink's isPending show progress. React 19 moves each page's <title> into <head>, and the root layout focuses the new <h1> so keyboard and screen reader users start on the new content.
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
title at start: Home | Shop
downloading the reports code...
pending: Loading page... | Reports (loading...)
focus on: Reports | title: Reports | Shop