T
TanStack•2w ago
quickest-silver

avoid route nesting not working as expected

i've a file based routing defined as such: 
.../$slug
     /members
       /route.tsx // <- contain tabs
       /(tab1)/index.tsx
       /tab2/index.tsx
     /members.invite.tsx // <- not nested to avoid showing tabs
.../$slug
     /members
       /route.tsx // <- contain tabs
       /(tab1)/index.tsx
       /tab2/index.tsx
     /members.invite.tsx // <- not nested to avoid showing tabs
but tabs still show (see screenshot) is that a bug or expected behavior? how to land a solution for this which does not involve route matching?
No description
2 Replies
yappiest-sapphire
yappiest-sapphire•7d ago
it does not matter if you dont have the file in the folder, it will nest if the parent manages the segment before the current route. you'd instead need a pathless route to make it work the way you intend 
- members/
  - _Tabs/
    - route.tsx // <- contain tabs
    - index.tsx // Tab 1 (removed the `(tab1)` as that's not necessary, ig you can keep it for clarity)
    - tab2/index.tsx
  - invite.tsx
- members/
  - _Tabs/
    - route.tsx // <- contain tabs
    - index.tsx // Tab 1 (removed the `(tab1)` as that's not necessary, ig you can keep it for clarity)
    - tab2/index.tsx
  - invite.tsx
you could alternatively try the _ suffix to prevent a route from being nested under it's parent As a rule of thumb, folders are just a convenient way to organize routes, if a route is in a folder or isnt will not change it's behavior it's rather useful to avoid having very long filenames, e.g.. 
// this
- articles.index.tsx
- articles.$articleId.index.tsx
- articles.$articleId.comments.index.tsx
- articles.$articleId.comments.$commentId.index.tsx

// becomes
- article/
  - index.tsx
  - $articleId/
    - index.tsx
    - comments/
      - index.tsx
      - $commentId/
        - index.tsx
// this
- articles.index.tsx
- articles.$articleId.index.tsx
- articles.$articleId.comments.index.tsx
- articles.$articleId.comments.$commentId.index.tsx

// becomes
- article/
  - index.tsx
  - $articleId/
    - index.tsx
    - comments/
      - index.tsx
      - $commentId/
        - index.tsx
but functionally they work the same
quickest-silver
quickest-silverOP•4d ago
actually this _ suffix didn't work but wrapping in a subfolder with () did 
.../$slug
     /members
       (tab-view)/
         /route.tsx // <- contain tabs
         /(tab1)/index.tsx
         /tab2/index.tsx
     /invite.tsx
.../$slug
     /members
       (tab-view)/
         /route.tsx // <- contain tabs
         /(tab1)/index.tsx
         /tab2/index.tsx
     /invite.tsx
in case somebody interested

Did you find this page helpful?