Questions
10 of 14
Basics
JSX
Virtual DOM
Reconciliation
State and Props
Components
Class Components
Function Components
Lifecycle functions
Code Sharing
Hooks
useState
useReducer
useMemo
useContext
useCallback
useEffect
Custom Hooks
New Hooks
HOC
Refs
Data Sharing
Events
Context API
Redux
Router
CSR-SSR
React APIs
Performance Optimisation
ReactDOM
Strict Mode
Security
Implement Layout and Index routes in Data mode of routing?
Difficulty: 6/10
layout routes, index routes, data routers
Layout Routes: Omitting the path in a route creates new Nested Routes for its children without adding any segments to the URL.
Index routes are defined by setting index: true on a route object without a path. Index routes render into their parent's Outlet at their parent's URL (like a default child route). Note that index routes can't have children.
Scenario Questions
0-2 years experience
- 1How would you set up a layout route that fetches user profile data before rendering its child routes using React Router's data APIs?
- 2If you add an index route under a parent route that already has a loader, what component will be rendered when navigating to the parent path?
2-5 years experience
- 1We need a dashboard with a shared navigation bar and a default overview page. Walk me through how you'd structure the routes using a layout route and an index route, and how you'd handle loading the navigation data.
- 2During testing we noticed that the loader for a layout route runs on every navigation to its child routes, causing unnecessary network calls. How would you debug and fix this behavior?
5-8 years experience
- 1Our application uses data routers and we want to implement code‑splitting for each layout route while preserving data loading and error handling. How would you design this, and what trade‑offs would you consider?
- 2Explain how you would handle error boundaries and loading states for nested layout routes that each have their own loaders, ensuring a smooth user experience at scale.
8+ years experience
- 1We are migrating a large legacy SPA to React Router v6 data routers. Describe the strategy you’d use to refactor existing nested routes into layout and index routes, addressing concerns like SEO, server‑side rendering, and cross‑team ownership.
- 2How would you establish a shared convention for defining layout and index routes across multiple product teams to minimize duplication and keep data fetching consistent, while allowing independent deployment?
Follow-up Questions
- What happens if the layout loader throws an error?
- Can you share how you’d test the loading sequence of nested routes?
- How would you pass data from a layout loader to its index route component?