Skip to content
Flows
Library Paths Vault Generate Progress Run Demo Flow
Debugging Beginner · 30-60 minutes

Fix Routing/Navigation

Repair broken links, 404s, back-button traps, and guard gaps so navigation works like users expect.

Start Route · 5 steps

The route

5 steps to Done

  1. 01

    Map routes and links

    Inventory every route and every element that navigates.

    Preview prompt + verify gate ▾

    Produce two tables. Routes: every defined route, its component, and whether it is public or protected. Links: every nav item, button, card, and inline link that navigates - its label, intended destination, and verified actual destination (click each one). Flag mismatches, dead links (#/empty handlers), and orphan pages no link reaches.

    • ✓ All routes listed with protection status
    • ✓ Every link click-verified
    • ✓ Dead links and orphans flagged
  2. 02

    Fix dead and wrong links

    Every navigation element must reach its labeled destination.

    Preview prompt + verify gate ▾

    Fix every flagged link. Requirements: dead links get real destinations (or removal only if truly redundant - state why); wrong destinations corrected; use the SPA's Link/navigate (no full page reloads); external links open safely in new tabs; orphan pages get linked from a sensible place or are removed deliberately. Re-verify each fixed link by clicking.

    • ✓ No # or empty-handler links remain
    • ✓ Navigation does not full-reload the SPA
    • ✓ Orphans are linked or consciously removed
  3. 03

    Fix deep links and refresh

    Any URL must load directly and survive refresh.

    Preview prompt + verify gate ▾

    Verify and fix direct loading: open every route (including nested and parameterized ones like /items/123) directly in a fresh tab and refresh on it. Fix server 404s with the SPA fallback configuration; fix pages that crash without preloaded state by fetching from route params; parameterized routes with invalid ids must show a proper not-found state, not a crash.

    • ✓ Nested routes survive refresh
    • ✓ Detail pages load from the URL param alone
    • ✓ Invalid ids show a not-found state
  4. 04

    Fix guards, back button, and 404

    Close the navigation edge cases users always hit.

    Preview prompt + verify gate ▾

    Fix the edges. Requirements: protected routes redirect the logged-out to login without flashing content, and return users to their intended page after login; logged-in users are redirected away from login/signup; no redirect loops (test both states on every guard); back button works sensibly after redirects and logout (no private content, no traps); add a designed 404 page with a way home for unknown URLs.

    • ✓ No content flash before guard redirects
    • ✓ Post-login returns to the intended page
    • ✓ Back after logout exposes nothing
    • ✓ Unknown URLs render the 404 page
  5. 05

    Navigation QA run

    Prove the whole navigation graph works end to end.

    Preview prompt + verify gate ▾

    Run the navigation QA and report PASS/FAIL with evidence: click every link (correct destination); cold-load and refresh every route; back/forward through a 5-page journey; guard behavior in both auth states; 404 for garbage URLs; mobile nav reaches every destination. Fix all failures and re-run.

    • ✓ Every link and route re-verified
    • ✓ Both auth states tested on guards
    • ✓ Mobile navigation verified
    • ✓ All failures fixed