TanStack · Component

Outlet

TanStack Router's Outlet renders the next matching child route inside a parent route component. It takes no props and renders null when no child route matches.

How it works

Outlet is a parameterless component for nested TanStack Router layouts. When rendered inside a route component, it inserts the next matching child route at that position; with no matching child, it renders nothing.

Syntax

<Outlet />

Returns

The matched child route's component, errorComponent, pendingComponent, or notFoundComponent; otherwise null.

Key points

Outlet inserts the next child route that can match the current location.
It has no props and may be placed at any point in the parent route's component tree.
For a matched child, Outlet selects the applicable component state, including normal, error, pending, or not-found rendering.
When no child route matches, Outlet contributes no rendered output.
Outlet is the rendering mechanism that makes nested route composition possible.

Common mistakes

An Outlet does not render fallback content when its parent has no matching child route; it produces null.
A route without its own component receives Outlet behavior automatically, so adding a component is only necessary when defining layout content.

Example: Render child routes in a root layout

import { Outlet, createRootRoute } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <main>
      <h1>My App</h1>
      <Outlet />
    </main>
  )
}

Renders the root layout and places the currently matched child route where Outlet appears.

When to use it

Render top-level routes beneath shared branding or navigation.

Root application shell

Place child pages inside a parent route's persistent layout.

Nested layouts

Wrap protected child routes in a layout or pathless layout route.

Authenticated sections

Allow the matched child component, pending UI, error UI, or not-found UI to render at the nested position.

Conditional route states

Interview questions

QWhat is Outlet used for, and what does it render?

Outlet renders the next potentially matching child route inside a parent route's component tree. It accepts no props, and it renders null when no child route matches.

Follow-up: What happens if a route has no component? TanStack Router renders an Outlet automatically for that route.

QHow does Outlet support nested layouts?

Place Outlet anywhere in the parent route component tree where the child route should appear. The surrounding elements remain part of the parent layout while the matched child is inserted at that location.

Follow-up: How would you create a shared authenticated layout? Use a layout or pathless layout route, render the shared UI around Outlet, and perform the authentication check in beforeLoad.

QWhat does Outlet return for matched and unmatched children?

The component renders the matched child route's component, error component, pending component, or not-found component as appropriate. It has no configurable props.

Follow-up: What is the fallback when no child route matches? Outlet returns null, so any fallback UI must be supplied by the surrounding route component.

createRootRoute
createFileRoute
RouteComponent
defaultComponent
Layout Route
Pathless Layout Route

Source: Outlets. Checked 2026-10-16.