How do you create a dynamic route like /products/:productId in React Router?

WHAT THIS TESTS: This question checks whether you understand React Router v6 dynamic routing syntax and the hook-based API for reading URL parameters. At the senior level, interviewers want to see that you know the modern declarative approach rather than legacy patterns, and that you can connect route configuration to component logic cleanly.

A GOOD ANSWER COVERS: First, route definition using a colon prefix in the path prop, such as path="products/:productId" inside a Route component nested within Routes. Second, accessing the parameter inside the rendered component with the useParams hook, which returns an object where keys correspond to the dynamic segment names. Third, mentioning that useParams only works inside the component tree rendered by the matching route, because it relies on React context provided by the router. Fourth, optionally noting that multiple dynamic segments like path="products/:productId/reviews/:reviewId" are supported and all appear in the useParams object.

COMMON WRONG ANSWERS: Using props.match.params from React Router v5 is the most common red flag and shows outdated knowledge. Another mistake is trying to parse window.location.pathname manually with string splitting or regex, which ignores the router's built-in abstraction. Some candidates forget the colon prefix and write path="products/productId" as a static literal, which only matches that exact string. Finally, calling useParams outside the router context, such as in a utility file not rendered by a Route, will return an empty object and indicates a misunderstanding of how the hook receives data.

LIKELY FOLLOW-UPS: The interviewer might ask how to make a parameter optional, which in v6 is done with an outlet or a separate route rather than a question mark in the path. They could ask how to navigate programmatically to a dynamic route, which is answered with useNavigate and template literals. They might also ask how to validate that productId is a number before rendering, which leads to discussing loaders, route guards, or runtime validation inside the component.

ONE CONCRETE EXAMPLE: In an e-commerce app, you would define the route as Route path="products/:productId" element={ProductDetail} inside Routes. Inside ProductDetail, you write const { productId } = useParams(). You then fetch product data in a useEffect or a route loader using that productId. If the user visits products/42, useParams returns { productId: "42" }. You should guard against undefined by checking the key exists or by using TypeScript to enforce param types.

Source: reactrouter.com