How to set a route prefix in data mode?

Q: How to set a route prefix in data mode?

createBrowserRouter([ { // no component, just a path path: "/projects", children: [ { index: true, Component: ProjectsHome }, { path: ":pid", Component: Project }, { path: ":pid/edit", Component: EditProject }, ], }, ]);

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

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

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.

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?