What are layout routes and index routes?

Layout Routes: Routes without a path property create new nesting layout for their children, without adding any segments to the URL.

Index Routes: Index routes render into their parent's <Outlet/> at their parent's URL (like a default child route). They are configured with the index prop:

Difficulty: 6/10

Topics: nested routing, react router, state management

Scenario Questions

0-2 years experience

1
Imagine you're building a dashboard with a persistent sidebar and header. How would you set up your React Router configuration so that the sidebar doesn't re-render or unmount when the user clicks between the 'Analytics' and 'Settings' tabs?
2
You've set up a parent /dashboard route and a child /dashboard/settings route. But when you navigate to /dashboard, the screen is completely blank under the header. What component are you likely missing in your parent route, and how would you configure an index route to show a 'Welcome' screen by default?

2-5 years experience

1
We have a multi-step checkout flow wrapped in a layout route. The layout needs to display a progress bar based on the current step's state. How would you share state or pass data from the active child route back up to the parent layout route using React Router's built-in APIs?
2
A developer on your team created a layout route for /admin, but they noticed that every time they navigate between admin sub-pages, a heavy chart component in the admin sidebar re-renders and flashes. How would you debug this, and how does React Router's layout rendering behavior prevent or cause this?

5-8 years experience

1
In a large-scale SaaS app, we have deeply nested layouts (e.g., Organization -> Project -> Settings). Each layout has its own data loader. How do you optimize these loaders to prevent 'waterfalling' network requests when a user deep-links directly to a nested settings page?
2
We are redesigning our app's navigation. Some pages need a dark theme sidebar, others need a light theme sidebar, and some need no sidebar at all. How would you structure your layout routes to support these visual variations without duplicating layout code or creating a massive, prop-drilled 'God' layout component?

8+ years experience

1
We are migrating a legacy React SPA with ad-hoc, component-level routing to a modern nested routing architecture. How would you design the migration path to minimize bundle size impact and avoid breaking deep links for millions of active users?
2
In a monorepo where different teams own different sections of the app (e.g., Billing, Auth, Dashboard), how would you architect the layout and index route configuration so teams can deploy their routes independently without risking merge conflicts in a single, centralized route config file?

Follow-up Questions

❓How does `useOutletContext` compare to standard React Context for sharing state down to nested routes?
❓What happens to the component lifecycle of a layout route when navigating between two of its child routes?
❓How do you handle error boundaries at the layout level versus the index route level?