TanStackT
TanStack•9mo ago•
2 replies
slow-yellow

File based pathless wrapping route in folder

I'm trying to figure out if I don't get the docs right. In the following situation with this folder structure:
routes/
└── app/
    └── get-started/
        ├── _layout.tsx
        ├── index.tsx
        └── accounts.tsx

the _layout.tsx gets its own route in the routetree, and hence it does not wrap index or accounts.tsx

However, if I change it to:

routes/
└── app/
    └── get-started/
        ├── _layout.tsx
        ├── _layout.index.tsx
        └── _layout.accounts.tsx

It correctly works. As I understand the docs, a _layout.tsx should correctly wrap the routes in the same folder. Basically the file-naming-based version _layoutfile.actualroute.tsx is another convention. As for the _layout.tsx contents it's as simple as:

export const Route = createFileRoute("/app/get-started/_layout")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
      <Box>
        <Outlet />
      </Box>
  );
}
Was this page helpful?