06 / 14

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

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
javascript
  1. 1

    You can have multiple dynamic segments in one route path.

  2. 2

    You can make a route segment optional by adding a ? to the end of the segment.

Scenario Questions

0-2 years experience

  1. 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?
  2. 2If you forget to include a leading slash in the path definition for a dynamic segment, what will happen when navigating to /products/123?
  3. 3Can you show me the JSX for a <Route> that renders ProductPage for /products/:productId and explain how the component reads the productId?

2-5 years experience

  1. 1Our feature loads a user profile based on the :username segment, but after a recent refactor the profile page sometimes receives undefined. Walk me through how you would debug the routing setup.
  2. 2We need to support optional query parameters alongside a dynamic segment, like /search/:term?. How would you configure the route and handle the optional part in the component?
  3. 3Explain the trade‑offs between using useParams vs. reading the URL via useLocation for a dynamic segment when you also need to react to search params.

5-8 years experience

  1. 1Our application has nested dynamic routes for a dashboard (/org/:orgId/project/:projectId). Discuss how you would structure the route hierarchy to avoid unnecessary re‑renders and keep URL state in sync.
  2. 2When scaling to thousands of dynamic routes (e.g., a CMS with millions of pages), what strategies would you employ to keep the client bundle size small and routing performant?
  3. 3Describe how you would implement lazy loading of route components that depend on dynamic segment data, ensuring the data is fetched before the component mounts.

8+ years experience

  1. 1We are migrating from a custom routing solution to React Router across multiple teams. How would you design a migration plan that preserves existing dynamic‑segment URLs and minimizes disruption?
  2. 2Consider a micro‑frontend architecture where each team owns a set of dynamic routes under a common base path. What conventions and tooling would you put in place to ensure route definitions don’t conflict and remain type‑safe?
  3. 3At scale, how would you handle versioning of route schemas (e.g., changing :userId to :uid) across services while keeping backward compatibility for clients?

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?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.