11 / 14

How to set a route prefix in data mode?

Difficulty: 5/10
React Router, basename, nested routes

A route with just a path and no component creates a group of routes with a path prefix.

javascript

Scenario Questions

0-2 years experience

  1. 1We need to add a '/admin' prefix to all routes in our new React app using React Router's data APIs. How would you configure the router to achieve that?
  2. 2If you set a basename of '/app' in createBrowserRouter but notice the URLs still show the full path, what might be wrong?

2-5 years experience

  1. 1During a sprint we introduced a parent route with path='/dashboard/*' to group several pages, but navigation to '/dashboard/settings' results in a 404. Walk me through how you'd debug the route prefix issue.
  2. 2Our team wants to share a common layout for routes under '/profile' while keeping data loaders at the parent level. How would you structure the route objects and what trade‑offs does this introduce?

5-8 years experience

  1. 1Imagine you're building a multi‑tenant SaaS where each tenant accesses the app at '/tenantId/*'. How would you design the route prefix strategy using React Router data mode to support dynamic prefixes without reloading the app?
  2. 2We observed a performance regression after adding a deep nested route hierarchy with a common prefix. What considerations around route matching and code‑splitting would you evaluate to mitigate the impact?

8+ years experience

  1. 1Our organization is migrating from a legacy server‑side routing system to React Router data mode across several micro‑frontends. How would you plan the transition of route prefixes, ensuring backward compatibility and minimal disruption?
  2. 2Discuss the long‑term maintenance implications of using a global basename versus per‑module route prefixes in a large, cross‑team codebase. Which approach would you advocate and why?

Follow-up Questions

  • What edge cases might break the prefix handling?
  • How would you write tests to validate the prefix works across environments?
  • What monitoring would you add to catch routing regressions in production?
Share

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