How to create a layout for a path (and all sub-paths) without _pathless style routes?

[mikebski]

I'd like to have a couple of layouts in my path that apply to that path and all children. Imagine that in the following example _layout is a "pathless" route that uses the <some layout><Outlet/></some layout> pattern and each _layout applies to its directory and all children.

This would avoid having to use the _layout.login.tsx naming convention for all files, which I think is a little awkward.

/login/_layout.tsx
/login/login.tsx

/app_layout.tsx
/app/index.tsx
/app/alpha.tsx
/app/acme/index.tsx

/admin/_layout.tsx
/admin/index.tsx
/admin/x/whatever.tsx
/admin/y/z/a/b/c/d.tsx

[schiller-manuel]

name it route.tsx instead of _layout.tsx and it will work

[mikebski]

@schiller-manuel - Thanks, but I guess I don't understand. I have:

/route.tsx -

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

function RouteComponent() {
  return (
    <>
      <Layout />
      <TanStackRouterDevtools />
    </>
  )
}

This renders an empty page with my layout ( is empty), and looks fine.

Then I have /home.tsx:

export const Route = createFileRoute('/home')({
  component: Home,
})

function Home() {
  return <App />
}

This is not wrapped by route.txt and does not have my menus, etc...

Is this what you meant? It's also not mentioned anywhere in the docs...

[schiller-manuel]

no this is not what I meant. inside a folder, you can use route.tsx. for top-level routes you need to put the layout into __root.tsx.
Or put them inside of a _some_layout folder.

[mikebski]

So I have:

/routes/(app)/index.tsx
/routes/(app)/route.tsx

I still don't get the route rendered "around" the index.tsx

If I use this it renders what I want, so that tells me my layout route component is right...:

/routes/(app)/_route.index.tsx
/routes/(app)/_route.tsx

[schiller-manuel]

layout groups don't nest, they are purely for filesystem structure. they don't influence anything.