What are route prefixes?

Route Prefix is a Route with path but without an element prop, it adds a path prefix to its child routes, without introducing a parent layout.

javascript

Difficulty: 5/10

Topics: React Router, basename, route prefix

0-2 years experience

1
We have a small React app using React Router. How would you set up a route prefix so that all routes are under '/app' without repeating the prefix in each Route component?
2
If you add a new page at '/app/settings' but forget to include the prefix in the Link component, what will the user see when they click it?

2-5 years experience

1
You’re adding a feature module that should be accessible under '/admin'. The team is using BrowserRouter with a basename. Explain how you would configure the router and why the existing routes might break after you add the new module.
2
During QA, a tester reports that navigating directly to '/admin/users' results in a 404, but clicking through the UI works. What could be causing this and how would you debug it?

5-8 years experience

1
Our application is being deployed under different base paths for each client (e.g., '/clientA', '/clientB'). Discuss the trade‑offs between using the BrowserRouter basename prop versus a custom route‑prefix component, especially regarding code‑splitting and server‑side rendering.
2
We need to support deep linking and server‑side rendering for routes with a common prefix. How would you ensure that the prefix is correctly handled both on the client and the server without duplicating configuration?

8+ years experience

1
The company is moving from a monolithic React app to a micro‑frontend architecture where each micro‑frontend is served under its own path prefix. What architectural considerations around route prefixes, shared navigation, and bundle loading would you raise, and how would you structure the routing layer to stay maintainable across teams?
2
Legacy parts of the app still use hash routing while new modules use BrowserRouter with a basename. Propose a migration strategy that minimizes user‑visible breakage and keeps SEO intact, addressing how route prefixes are reconciled across the two systems.