react-router-v7-patterns

What problem does it solve?

This skill eliminates common bugs and unexpected behavior when refactoring single-page applications to use nested routes with React Router v7 and v6.4+ data routers, such as mismatched tab active states, dropped query strings during redirects, duplicate layout headers, and stale component state from route reuse.

Core Features & Use Cases

• 4 Proven Nested Route Patterns: Covers URL-driven tab state, query string preservation during backward-compatible redirects, layout chrome ownership to avoid double rendering, and search param synchronization to fix component reuse race conditions.
• Decision Trees & Detection Signals: Includes guidance to choose between <Navigate> redirects and re-pointing links, plus signals to audit for broken query string deep links.
• Worked Real-World Example: Draws on class-level lessons from a production CRM system refactor that converted 5 top-level admin routes into a nested /settings/* tabbed layout.
• Use Cases: Refactoring top-level routes into nested sub-route trees, building tabbed settings/admin interfaces, debugging "URL shows X but page displays Y" bugs, and implementing backward-compatible route redirects.

Quick Start

Use this skill to fix a bug where clicking a settings tab updates the URL but the active tab highlight remains on the previous tab, or to refactor your existing top-level admin routes into a nested /settings/* sub-route structure with tabbed navigation.