Proposal: Support for multiple "slot-based" outlets in TanStack Router

[discoverlance-com]

Hi maintainers,

I’d like to discuss a potential enhancement for the router: support for multiple, named outlets (or “slots”) in a parent route. Currently, Outlet only allows rendering child content in one place, which works well for simple nested routes. However, some layout use cases could benefit from being able to target multiple regions in the parent layout.

For example, consider a root layout with a sidebar and main content area:

// this can be any parent route
function RootLayout() {
  return (
    <div className="layout">
      <aside><Outlet slot="sidebar" /></aside>
      <main><Outlet /></main>
    </div>
  );
}

Here, the main content still uses the existing Outlet, but the sidebar is a named slot. Child routes could then populate these slots independently, for example, suppose we have /employees and /admin routes which are children of the RootLayout above:

I am using Inlet here as a component but it can be any component from tanstack router

// /admin route
import { Inlet } from '@tanstack/router'

function AdminPage() {
  return (
    <>
      <Inlet name="sidebar">
        <AdminSidebar />
      </Inlet>
      <div>Main admin content</div>
    </>
  );
}

// /employees route
import { Inlet } from '@tanstack/router'

function EmployeePage() {
  return (
    <>
      <Inlet name="sidebar">
        <EmployeeSidebar />
      </Inlet>
      <div>Main employee content</div>
    </>
  );
}

Benefits of this approach:

• Layouts can have multiple dynamic regions without resorting to some heavy context or even logic to change content of some sections in the parent based on the child.
• Child routes can control content for specific areas of the parent layout.
• Main outlet behavior remains unchanged, so existing use cases are fully compatible.

I’d love to hear feedback from the community:

• Would this be a useful addition to the router?
• Are there any design concerns or pitfalls I may be overlooking?
• Could there be a natural API that fits with TAN Stack Router’s current patterns?
• Are there other solutions I could consider in the router that solves this use case?

Thanks for considering!

[teidesu]

+1, would be really useful in many cases

though i thought of a bit different "inlet" api that might be a bit better:

export const Route = createFileRoute('/foo/bar/baz')({
  component: RouteComponent,
  slotComponents: {
    sidebar: EmployeeSidebar
  }
})

this way names of "slots" can also be statically typed (extracted by compiler from <Outlet slot="..." /> usages), and it's probably easier to implement than detecting <Inlet> usages at runtime

edit: though on a second thought that would make it harder to share state between the outlets :c

additionally, it would be cool if we could specify "default" outlet content by passing children to the <Outlet>, something like:

function ParentRouteComponent() {
  return (
    <>
      <div class="sidebar">
        <Outlet slot="sidebar">
          <AppSidebar />
        </Outlet>
      </div>

      <Outlet />
    </>
  )
}