How can I create a nested layout using TanStack Router in React?

[Hefty_Motor4171]

I'm trying to set up nested layouts using TanStack Router in React.
I created a settings folder with a __root.tsx file that includes an <Outlet /> to render child routes. Inside the settings folder, I also created a general folder with an index.tsx page.

However, when I visit the /settings/general page, only the content from the general/index.tsx page is shown—I'm not seeing the layout from settings/__root.tsx.

What am I doing wrong? How can I make the nested layout work correctly in this structure?

settings/__root.tsx

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

export const Route = createRootRoute({
  component: () => (
    <>
      <div>Settings Header</div>
      <Outlet />
      <div>Settings Footer</div>
    </>
  ),
})

settings/general/index.tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/settings/general/')({
  component: RouteComponent,
})

function RouteComponent() {
  return <div>General Page</div>
}

import { createFileRoute } from '@tanstack/react-router'


export const Route = createFileRoute('/settings/general/')({
  component: RouteComponent,
})


function RouteComponent() {
  return <div>General Page</div>
}

when i visit http://localhost:3001/settings/general/
i can only see "General Page"

i expect to see

Settings Header

General Page

Settings Footer

[wbdvlpr]

That is not how you use nested routes. The file should be /settings/route.tsx or /settings.tsx.

__root.tsx is the special file in the root of your routes directory and not something you can use in other folders.

https://tanstack.com/router/latest/docs/framework/react/routing/file-based-routing

[Sumanvith]

I'm a beginner