correct-apricot

Router layouts inside subdirectory and prefixing

Gut check since I'm mostly brand new to Router and start, when creating a layout for a sub-route, it shows here that you could define it like this to create a Posts layout, is there any way to keep that layout file inside the subdirectory without having to prefix all the other pages inside it such as index and $postId?

21 Replies

foreign-sapphire•11mo ago

what do you mean by " without having to prefix all the other pages inside it such as index and $postId?" ?

correct-apricotOP•11mo ago

like, in my start project this is how im doing a layout for all /logs routes

correct-apricotOP•11mo ago

that may be completely wrong already, though lol

foreign-sapphire•11mo ago

hmmm

correct-apricotOP•11mo ago

where _logs.tsx is the layout I'd prefer to just have like: _layout.tsx, index.tsx, $logId.tsx, and legacy.$logId.tsx

foreign-sapphire•11mo ago

so you can do a lot of variations here

logs/
  _logs.tsx
  _logs/
    index.tsx
    $logId.tsx

logs/
  _logs.tsx
  _logs/
    index.tsx
    $logId.tsx

or just this, no separate layout:

logs.tsx <== put the layout in here!
logs/
    index.tsx
    $logId.tsx

logs.tsx <== put the layout in here!
logs/
    index.tsx
    $logId.tsx

or this

logs/
    route.tsx <== put the layout in here!
    index.tsx
    $logId.tsx

logs/
    route.tsx <== put the layout in here!
    index.tsx
    $logId.tsx

correct-apricotOP•11mo ago

ahhh so route.tsx sort of functions like layout.tsx in next?

foreign-sapphire•11mo ago

it can act as such it is "just" the route definition of the "logs" route and as such it can also have a component and that component can render more than just an <Outlet> and that is then what can be called a "layout"

correct-apricotOP•11mo ago

I see many options here now to pick one 🤣 ty

foreign-sapphire•11mo ago

you can also rename "route.tsx" to something else its configurable

correct-apricotOP•11mo ago

😳

foreign-sapphire•11mo ago

just to open up some more things

correct-apricotOP•11mo ago

where @?

foreign-sapphire•11mo ago

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