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

_layout.tsx

should correctly wrap the routes in the same folder. Basically the file-naming-based version

_layoutfile.actualroute.tsx

_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>
  );
}

TanStack•11mo 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

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

_layout.tsx

should correctly wrap the routes in the same folder. Basically the file-naming-based version

_layoutfile.actualroute.tsx

_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>
  );
}

File based pathless wrapping route in folder

Similar Threads

File based pathless wrapping route in folder

Similar Threads

Similar Threads

Similar Threads