Practice 09 · URL-driven screens

A. Navigate like a user

Open a detail screen in checkpoint 09, copy its full URL to a new tab, refresh it, then use Back and Forward. Try an unknown event ID and an unmatched route. Record heading, document title, focus destination and recovery link. Do not count a click-only test as direct-navigation evidence.

B. Repair a missing record

A detail component does events.find(item => item.id === eventId)!.title. Explain what the exclamation mark tells TypeScript and what happens when no record exists at runtime. Replace the assumption with explicit missing-record UI. Explain why loading must be handled before declaring an ID missing.

C. Transfer

Add an About this demo route with an accessible navigation link and a short honest scope statement. Give the screen a unique title and meaningful focus behavior. Decide whether search filters should survive navigating away and back; document the choice. Do not add synthetic form values to the URL.

Completion evidence: five navigation cases, missing-record repair, new route, title/focus and a state-lifetime decision. Separate solutions.