Implement nested routes in Data mode of routing?

Q: Implement nested routes in Data mode of routing?

createBrowserRouter([ { path: "/dashboard", Component: Dashboard, children: [ { index: true, Component: Home }, { path: "settings", Component: Settings }, ], }, ]);

Difficulty: 6/10

React Router, Nested Routes, Data Loaders

Routes can be nested inside parent routes through children.

The path of the parent is automatically included in the child, so this config creates both "/dashboard" and "/dashboard/settings" URLs.

Scenario Questions

0-2 years experience

1How would you set up a parent route with a loader and a child route that inherits the parent's data in React Router's data mode?
2If you navigate to '/dashboard/settings' and the parent '/dashboard' route has a loader that fetches user info, what props are available in the Settings component?

2-5 years experience

1We added a nested route '/projects/:projectId/tasks' with its own loader, but the parent '/projects/:projectId' loader is not being called. What could cause this and how would you fix it?

Follow-up Questions

What happens if a child route's loader throws an error—how does the parent handle it?
Can you explain how you would test that the nested data loading works as expected?
How would you handle route parameters that need to be shared across multiple nested levels?