Is Outlet "deprecated"?

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

pnpm create @tanstack/start@latest

, the Outlet component is not used at all. Instead,

RootDocument

RootDocument

uses

{children}

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

// 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 />

<Outlet />

anymore?

TanStack•4mo ago•

6 replies

hurt-tomato

Is Outlet "deprecated"?

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

pnpm create @tanstack/start@latest

, the Outlet component is not used at all. Instead,

RootDocument

RootDocument

uses

{children}

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

// 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 />

<Outlet />

anymore?

Is Outlet "deprecated"?

Similar Threads

Is Outlet "deprecated"?

Similar Threads

Similar Threads

Similar Threads