T
TanStack•3mo ago
inland-turquoise

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
rival-black
rival-black•3mo 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
inland-turquoise
inland-turquoiseOP•2mo 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?