The answer
Use the useParams hook inside the component. It returns an object with the parameter name and its value from the URL, which you can then use to fetch the right data.
Dynamic Routing in React: useParams and Route Parameters
How do I read a route parameter in React?
More FAQs in Dynamic Routing in React: useParams and Route Parameters
A dynamic route uses a parameter in the path, like /product/:id. The same component renders for any id, and you read the id with useParams to fetch the right data. This lets one component handle many similar URLs.
In the 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 through useParams.
Because you forgot to add the parameter to the useEffect dependency array. Without it, the effect does not re-run when navigating between two dynamic routes, so the component shows stale data for the previous id.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.