Best way to go about sharing a layout between non-sibling routes?
Answered
Birman posted this in #help-forum
BirmanOP
Hey everyone! I'm trying to create two routes that would share a layout, but wouldn't be within the same route segment. The routes would be something like
/post/[post-id] and /user/[username]/post/[post-id]. I think something like that might be achieved by doing some weird stuff with route groups, but it doesn't seem... great. It might be a lot simpler than I'm thinking.Answered by Ray
(group-name)/layout.tsx(group-name)/post/[post-id]/page.tsx(group-name)/user/[username]/post/[post-id]/page.tsx7 Replies
@Birman Hey everyone! I'm trying to create two routes that would share a layout, but wouldn't be within the same route segment. The routes would be something like `/post/[post-id]` and `/user/[username]/post/[post-id]`. I think something like that might be achieved by doing some weird stuff with route groups, but it doesn't seem... great. It might be a lot simpler than I'm thinking.
(group-name)/layout.tsx(group-name)/post/[post-id]/page.tsx(group-name)/user/[username]/post/[post-id]/page.tsxAnswer
@Ray `(group-name)/layout.tsx`
`(group-name)/post/[post-id]/page.tsx`
`(group-name)/user/[username]/post/[post-id]/page.tsx`
BirmanOP
thanks for the answer! right, but how would this work with the fact that
/user/[username]/posts doesn't use that same layout? if i keep /user/[username]/posts/page.tsx outside of (group-name) it might work (haven't tried) but wouldn't that be super weird, architecture wise? to have a nested route in a separate folder than its parent@Birman thanks for the answer! right, but how would this work with the fact that `/user/[username]/posts` doesn't use that same layout? if i keep `/user/[username]/posts/page.tsx` outside of `(group-name)` it might work (haven't tried) but wouldn't that be super weird, architecture wise? to have a nested route in a separate folder than its parent
yes, don't put
/user/[username]/posts/page.tsx inside the route-group.If you don't like this approach, you could create a shared Layout component for /post/[post-id]/page.tsx and /user/[username]/post/[post-id]/page.tsx but this component is gonna re-render on route changebecause this is how the routing work in next
BirmanOP
fair enough
thanks!
np