inland-turquoise

Can we get a layout file type for file based routing?

It's sort of annoying sometimes where the _layout files and directories aren't sorted cleanly. And overall I find it a little confusing. Has a *.layout.tsx file type ever been considered? So we can do something like this?

.
└── routes/
    ├── _auth/
    │   ├── index.tsx
    │   ├── layout.tsx # or custom-name.layout.tsx
    │   ├── welcome.tsx
    │   └── dashboard/
    │       ├── index.tsx
    │       ├── route-a.tsx
    │       └── route-b.tsx
    ├── login.tsx
    └── logout.tsx

.
└── routes/
    ├── _auth/
    │   ├── index.tsx
    │   ├── layout.tsx # or custom-name.layout.tsx
    │   ├── welcome.tsx
    │   └── dashboard/
    │       ├── index.tsx
    │       ├── route-a.tsx
    │       └── route-b.tsx
    ├── login.tsx
    └── logout.tsx

16 Replies

adverse-sapphire•16mo ago

what does "not sorted cleanly" mean for you exactly?

inland-turquoiseOP•16mo ago

i.e. the ordering

inland-turquoiseOP•16mo ago

I also think its just easier to grok having the layout file inside the directory, everything relevant to the pathless route is in the same place than a lonely file route as a sibling of the pathless directory @Manuel Schiller

adverse-sapphire•16mo ago

you can have the layout file inside the directory just name it route.tsx (for now that name is hard coded but will be made configurable )

inland-turquoiseOP•16mo ago

amazing, thank you

adverse-sapphire•16mo ago

btw this is now configurable, so you can use another name than "route" if you want

fair-rose•14mo ago

hey bro, please explain. So if i have:

routes/
    login/
        index.tsx
        route.tsx # this can be layout.tsx now or smth?

routes/
    login/
        index.tsx
        route.tsx # this can be layout.tsx now or smth?

Im new, and docs are fuzzy with layouts. Thanks a bunch

adverse-sapphire•14mo ago

yes you could use "layout" instead of "route" if you want to

adverse-sapphire•14mo ago

see https://tanstack.com/router/v1/docs/framework/react/guide/file-based-routing#options

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

adverse-sapphire•14mo ago

however, I would only recommend doing this if necessary because now you are diverging from the "standard" conventions and it will be harder for people to understand

fair-rose•14mo ago

Is there some sort of config parameter I’m supposed to specify? For some reason I can get route to work but not layout.

adverse-sapphire•14mo ago

yes, the config parameter that I screenshotted above routeToken

fair-rose•14mo ago

routeFilePrefix Ahh I see thx

adverse-sapphire•14mo ago

no routeToken

fair-rose•14mo ago

Gotchu. Appreciate it

Gaming

Programming

Can we get a layout file type for file based routing?

Did you find this page helpful?