Chapter 45: Outlets

Core Idea

The <Outlet /> component marks where a route's matching child route should render, enabling nested routing layouts; if a route has no component defined, an <Outlet /> is rendered automatically.

Key Concepts

• <Outlet />: Renders the next potentially matching child route. Takes no props and can be placed anywhere in a route's component tree.
• Implicit outlet: If a route's component option is left undefined, TanStack Router renders an <Outlet /> for it automatically.
• No match behavior: When there is no matching child route, <Outlet /> renders null rather than erroring.
• Root layout pattern: The most common use is in the root route's component, wrapping shared chrome (headers, nav) around an <Outlet /> so all top-level routes render inside it.

Code Examples

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

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

function RootComponent() {
  return (
    <div>
      <h1>My App</h1>
      <Outlet /> {/* This is where child routes will render */}
    </div>
  )
}

• What it demonstrates: Using <Outlet /> in the root route to provide a persistent layout wrapping all nested routes.

Key Takeaways

1. <Outlet /> is the mechanism that makes nested routing/layouts possible in TanStack Router.
2. Omitting a component on a route is a valid shortcut for pass-through layout routes, it implicitly renders an outlet.
3. Place <Outlet /> anywhere in the component tree, not just at the top, to control exactly where nested content appears.

Connects To

• Ch 44: Creating a Router, the root route configured there typically hosts the top-level <Outlet />.
• Concept: Layout routes and pathless layout routes, which rely on <Outlet /> to render their children.