react-router-v7-params-debug

What problem does it solve?

This Skill addresses the common breaking change in react-router-dom v7 where route parameters are no longer automatically passed as component props, leading to undefined parameter values, failed API requests, and broken functionality for pages that rely on URL params like authentication tokens or user emails.

Core Features & Use Cases

• Breaking Change Diagnosis: Quickly identifies if a component is using the outdated v6 pattern of destructuring params from props instead of the v7 required useParams hook.
• Step-by-Step Debugging: Provides clear instructions to instrument fetch calls, verify build updates, and clear cached assets to rule out common caching issues.
• Edge Case Handling: Includes solutions for URL-encoded parameters like email addresses that require decodeURIComponent processing.
• Use Case: For example, after upgrading a React app to react-router-dom v7, a password reset page that previously worked stops sending the required token in API requests; this Skill fixes the broken param passing in minutes.

Quick Start

Use the react-router-v7-params-debug skill to fix undefined route parameters in your React Router v7 application components.