How can we handle dynamic segments of a route in declarative routing ?

Q: How can we handle dynamic segments of a route in declarative routing ?

} /> import { useParams } from "react-router"; export default function Team() { let params = useParams(); // params.teamId } You can have multiple dynamic segments in one route path. You can make a route segment optional by adding a ? to the end of the segment.

Difficulty: 5/10

react-router, dynamic routes, params handling

If a path segment starts with : then it becomes a 'dynamic segment'. When the route matches the URL, the dynamic segment will be parsed from the URL and provided as params to other router APIs like useParams.

javascript

1
You can have multiple dynamic segments in one route path.
2
You can make a route segment optional by adding a ? to the end of the segment.

Scenario Questions

0-2 years experience

1We have a React app using React Router v6. How would you set up a route that captures a user ID from the URL like /users/42 and passes it to a component?
2If you forget to include a leading slash in the path definition for a dynamic segment, what will happen when navigating to /products/123?
3Can you show me the JSX for a <Route> that renders ProductPage for /products/:productId and explain how the component reads the productId?

Follow-up Questions

What would you do if the param value is missing or malformed?
How does React Router decide which route matches when multiple patterns could apply?
Can you talk about the impact of route nesting on component re‑rendering?