Dynamic routing is the secret behind scalable web applications. It allows a single React component to serve millions of unique URLs by capturing variable data directly from the address bar.
1The Colon Syntax
The colon (:) is a special signal in React Router. When you define a route path like /profile/:id, the router treats :id as a wildcard. It will match /profile/123, /profile/alex, or /profile/settings. The string that appears in that position is captured as a parameter.
2Extracting Data with useParams
The useParams hook is the bridge between the URL and your component's logic. It returns an object where the keys are the names you chose in your route definition. This allows you to fetch specific data from an API based on the URL, creating truly dynamic user experiences.
