Nested Routes: Composing UI with <Outlet>
Nested routes build layouts with shared UI, like a sidebar. The <Outlet> component is a placeholder for changing content, perfect for dashboards. The footgun is forgetting the <Outlet> in the parent route; child routes will match the URL but won't render.
Why it exists
Modern web apps often have complex UIs where parts of the page remain constant while other parts change. Without nesting, you would have to duplicate layout code (like sidebars or headers) across many different page components. This makes the codebase brittle and hard to maintain.
The mental model
Think of Russian nesting dolls for your UI. The outermost doll is your main app layout. You open it to find a dashboard layout. You open that to find a specific page's content. The <Outlet> component is the empty space inside a doll, waiting for the next, smaller doll to be placed inside it.
How it works
In React Router, you define your routes in a hierarchical tree. A parent <Route> is responsible for a segment of the URL and renders a layout component. This layout component must include an <Outlet> component. When the URL matches a more specific, nested child route, that child's element is rendered inside the parent's <Outlet>. The parent remains on screen, wrapping the child.
When to use it
Use nested routes for any UI that has a shared layout structure across multiple views. This is perfect for dashboards with a persistent sidebar, settings pages with tabbed navigation, or any master-detail view where a list on the side controls the content in a main panel. If you see yourself copying and pasting a <Header> or <Nav> component into multiple pages, you should probably be using a nested route.
When not to use it
Avoid nesting for pages that are conceptually and visually distinct. For example, your public-facing marketing homepage and your private, logged-in application dashboard should be separate top-level routes, not nested within each other. Also, be mindful that deeply nested routes can complicate passing props; consider using React Context or a state management library for sharing data across deep levels.
One canonical example
A user settings page at /settings. This route renders a layout with a sidebar for navigation. Inside this route, you nest child routes for /settings/profile and /settings/billing. The parent component renders the sidebar and an <Outlet>. When a user clicks a link to /settings/profile, the ProfileForm component appears inside the <Outlet> without the sidebar having to re-render.
Interview question
What is the primary consequence if a parent route component, designed for nested routes, does not include an <Outlet> component?
- a.The parent component will render, but its own content will be empty as it expects the Outlet to fill it.
- b.Child routes will render, but they will appear as top-level routes, ignoring the parent's layout.
- c.The router will not recognize the child route paths, resulting in a 404 error.
- d.The parent component's layout will display, but the content intended for the child routes will not be rendered.Correct
Why? this is the answer
The card explicitly states that if the <Outlet> is forgotten, "child routes will match the URL but won't render." This means the parent's layout appears, but the child's content is absent, not that the URL matching fails.
Just read this? Test yourself on what you have been reading.
Read the original → reactrouter.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles