Discuss route object?
The objects passed to createBrowserRouter are called Route Objects.
- 1
Component: The Component property in a route object defines the component that will render when the route matches.
- 2
Loader: Route loaders provide data to route components before they are rendered.
- 3
Action: Route actions allow server-side data mutations with automatic revalidation of all loader data on the page when called from <Form>, useFetcher, and useSubmit.
- 4
shouldRevalidate: By default, all routes are revalidated after actions. This function allows a route to opt-out of revalidation for actions that don't affect its data.
- 5
lazy: Most properties can be lazily imported to reduce the initial bundle size.
Scenario Questions
0-2 years experience
- 1How would you create a route object for a simple "About" page using React Router v6?
- 2If you omit the 'path' property from a route object, what will the user see when they try to navigate to that route?
2-5 years experience
- 1You need to protect a "Profile" page so only authenticated users can see it. How would you structure the route objects, and what common mistake could cause the protection to fail?
- 2While adding a nested "Settings" route under a "Dashboard" parent, the parent component isn’t rendering. What could be wrong with your route object configuration?
5-8 years experience
- 1Your application’s route matching has become noticeably slower as the number of routes grew. How would you refactor the route objects or their hierarchy to improve performance?
- 2You want to lazy‑load each top‑level route using React.lazy and Suspense. How does that change the shape of the route object, and what pitfalls should you watch for?
8+ years experience
- 1Your team is migrating a large legacy codebase from React Router v5 to v6. What strategy would you use for updating route objects to minimize risk and keep multiple squads in sync?
- 2In a micro‑frontend architecture, each team owns its own set of routes. How would you design a shared routing contract that lets independent apps expose and consume route objects while preserving a cohesive navigation experience?
Follow-up Questions
- What are the key differences between a route object and the JSX <Route> declaration?
- How does React Router decide which route object matches when multiple paths could apply?
- Can you give an example of a situation where you’d need to add custom properties to a route object?