#Is Outlet "deprecated"?

7 messages · Page 1 of 1 (latest)

ocean pelican
#

Deprecated is not the right word here, but you will understand what I mean after reading this post.

When bootstrapping a new Tanstack Start project with pnpm create @tanstack/start@latest, the Outlet component is not used at all. Instead, RootDocument uses {children} to render routes, like this:

// src/routes/__root.tsx
export const Route = createRootRoute({
  shellComponent: RootDocument,
})

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  )
}

Does that mean there is no use case for <Outlet /> anymore?

#

Is Outlet "deprecated"?

frosty seal
#

From what I understand, the root route and component wraps everything in the DOM tree and so in React that'll be done by rendering childern.

In non-root routes the <Outlet /> is used to render child routes not components directly (even though your routes are just components).

<Outlet /> is basically a component that tells tanstack/react-router "there's a route here so go look up that route and pull it's components in". Where as the Root route/component just blanket renders all children because it doesn't (and shouldn't) care what the actual routes are.

#

So the quick answer is no <Outlet /> isn't deprecated. It's used in individual routes to render child routes.

ocean pelican
#

Aha, I see! Thank you

green wyvern
#

no it's not deprecated. only the root route has an optional shellComponent that wraps around everything. you can still add a component to a root route which then would need to render an <Outlet /> but there is rarely a need for that

bronze crown