📄 tanstack/router/latest/docs/framework/react/guide/outlets

Nested routing means that routes can be nested within other routes, including the way they render. So how do we tell our routes where to render this nested content?

The Outlet Component
--------------------

The Outlet component is used to render the next potentially matching child route. <Outlet /> doesn't take any props and can be rendered anywhere within a route's component tree. If there is no matching child route, <Outlet /> will render null.

Tip

If a route's component is left undefined, it will render an <Outlet /> automatically.

A great example is configuring the root route of your application. Let's give our root route a component that renders a title, then an <Outlet /> for our top-level routes to render.

tsx

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>
  )
}


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>
  )
}

Edit on GitHub

Creating a Router

Navigation

Partners Become a Partner

scarf analytics