Purpose of Outlet in React Router v6 nested routes
Nested routing layout knowledge.
Outlet renders the matched child route inside a parent layout, enabling shared chrome with swappable content; configure nested routes and place Outlet where children render.
WHAT THIS TESTS Your understanding of React Router v6's nested route model and the mechanism that lets a parent layout host whichever child route currently matches.
A GOOD ANSWER COVERS Outlet is a component you render inside a parent route's element to mark the spot where the matched child route should be displayed. It enables layout routes: the parent renders shared UI such as a header, sidebar, or tab strip, and Outlet renders the active child. This avoids duplicating the layout in every page. You configure it by nesting child route objects or Route elements under a parent route. When a child path matches, React Router renders the parent element, and wherever that element places Outlet, the child element appears. Outlet can also pass data to children via the context prop, read with useOutletContext.
COMMON WRONG ANSWERS Confusing Outlet with the React children prop; children come from JSX composition, while Outlet comes from route matching. Putting the full layout inside each leaf page. Forgetting that an index route fills the Outlet when the parent path matches exactly. Thinking Outlet requires manual prop drilling of the active route.
LIKELY FOLLOW-UPS What renders in the Outlet when only the parent path matches? That is the index route. How do you share data into children? useOutletContext. How does this compose multiple layout levels? What about a default fallback?
ONE CONCRETE EXAMPLE A settings area uses a parent route at /settings whose element is a SettingsLayout with a left nav and an Outlet. Child routes profile, security, and billing are nested under it. SettingsLayout renders the persistent nav plus the Outlet. Navigating to /settings/security keeps the nav fixed while the Outlet swaps in the SecurityPanel; an index child can render a profile summary when the user is at /settings exactly. One layout, three swappable sub-sections, no duplicated chrome.
Interview question
In React Router v6, what determines which component appears in a parent layout's <Outlet />?
- a.Whatever component most recently called the useNavigate hook
- b.The JSX children passed to the layout component by its parent
- c.The first route declared in the entire route configuration
- d.The currently matched nested child route under that parent routeCorrect
Why? this is the answer
Outlet renders the matched nested child route, not JSX children, so it updates as the active child route changes. It is driven by route matching, not declaration order or navigation calls.
Just read this? Test yourself on what you have been reading.
Read the original → reactrouter.com
- #react-router
- #routing
- #outlet
- #nested-routes
- #layouts
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. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles