Dynamic Routing in React: useParams and Route Parameters

Dynamic Routing in React: useParams and Route Parameters

Dynamic routing is what lets one component handle many similar URLs, like a product page for any product id. Here is how it works.

What Dynamic Routing Is

Instead of a fixed path like /about, a dynamic route has a parameter, like /product/:id. The same component renders for any id, and you read the id to fetch the right data.

Defining a Dynamic Route

In your route path, use a colon followed by the parameter name, like /restaurant/:id. React Router matches any value in that position and makes it available as a parameter.

Reading the Parameter

Use the useParams hook inside the component to read the parameter. It returns an object with the parameter name and its value from the URL.

Using the Parameter to Fetch

Pass the parameter to your fetch call so the component loads the right data. Include the parameter in the useEffect dependency array so the fetch re-runs when the id changes.

Multiple Parameters

You can have multiple parameters, like /user/:userId/post/:postId. useParams returns all of them in one object.

The Common Mistake

Forgetting to add the parameter to the useEffect dependency array, so navigating between two dynamic routes does not refetch the data and shows stale content.

The Takeaway

Dynamic routing uses a colon parameter in the path, useParams reads it, and you pass it to your fetch with the parameter in the dependency array. This lets one component handle many URLs.