03 / 14

Implement nested routes in declarative mode?

Difficulty: 6/10
react-router, nested routes, declarative routing

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

javascript
Child routes are rendered through the <Outlet/> in the parent route.

Scenario Questions

0-2 years experience

  1. 1How would you set up a parent route '/dashboard' with child routes '/dashboard/overview' and '/dashboard/settings' using React Router's declarative API?
  2. 2If you forget to include an <Outlet/> in the parent component, what will the user see when navigating to a child route?

2-5 years experience

  1. 1We need to add a nested route that loads data based on a URL param, but the data fetch is failing after a recent refactor. Walk me through how you'd debug the routing and data loading flow.
  2. 2Explain the trade‑offs between defining nested routes in a central route config versus rendering child <Routes> inside a component.

5-8 years experience

  1. 1In a large SaaS product we have deep nesting (up to four levels) and need code‑splitting per level. How would you structure the declarative route definitions and lazy loading to keep bundle size low while preserving navigation state?
  2. 2What edge cases arise with nested routes when using relative navigation like navigate('..'), and how would you guard against them in a reusable layout component?

8+ years experience

  1. 1Our organization is migrating from a legacy hash‑based router to React Router v6 with declarative nested routes across multiple micro‑frontends. What architectural considerations and contracts would you establish to ensure consistent routing behavior and avoid version drift?
  2. 2If you had to support both server‑side rendering and client‑side navigation for deeply nested routes, how would you design the route hierarchy and data fetching strategy to minimize duplication and keep SEO intact?

Follow-up Questions

  • Can you walk me through what happens when <Outlet> is omitted in a parent route?
  • How would you protect a nested route that requires authentication while keeping the layout reusable?
  • What considerations do you have for preserving scroll position when navigating between nested routes?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.