T
TanStack•5mo ago
absent-sapphire

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
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
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>
  );
}
 
export const Route = createFileRoute("/app/get-started/_layout")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
      <Box>
        <Outlet />
      </Box>
  );
}
2 Replies
optimistic-gold
optimistic-gold•5mo ago
You can use the first example and call the layout file route.tsx
absent-sapphire
absent-sapphireOP•5mo ago
That's awesome. Is it just me who find the docs super confusing though? Especially https://tanstack.com/router/latest/docs/framework/react/routing/file-based-routing
File-Based Routing | TanStack Router React Docs
Most of the TanStack Router documentation is written for file-based routing and is intended to help you understand in more detail how to configure file-based routing and the technical details behind h...

Did you find this page helpful?