Router fails to load view when using `./route.tsx` and `./(folder)/index.tsx` combination

[y-nk]

Which project does this relate to?

Router

Describe the bug

I'm trying to make navigation aware tab with root level to match the 1st tab. In order to keep things nice and tidy, i went for:

routes/
  tabs/
    (tab1)/index.tsx
    tab2/index.tsx
    route.tsx // ← top level tab navigation

when doing so, (tab1)/index.tsx is never loaded.

Your Example Website or App

https://stackblitz.com/edit/github-1pegkpfq-qja16boq

Steps to Reproduce the Bug or Issue

1. open the stackblitz
2. click in tabs on the top nav

url should be /tabs and (tab1)/index.tsx should not be visible.

Expected behavior

As a user, I expected the expected behavior but i am seeing nothing.

Screenshots or Videos

No response

Platform

Latest (as per provided stackblitz)

Additional context

No response

[ferretwithaberet]

For easier tracking, I am leaving this discord thread where we talked on this issue here.

TL;DR (as the discussion in the above thread is kind of long)
Route groups should unwrap their contents on the level they are on.
For example:

- (group)/
  - index.tsx
  - route.tsx
  - other-route1.tsx
- other-route2.tsx

should be treated like

- index.tsx
- route.tsx
- other-route1.tsx
- other-route2.tsx

as if the (group)/ directory is not even there.
The current behavior seems to work similar to pathless routes, where route.tsx only applies to index.tsx and other-route1.tsx. And it gets buggier as you nest route groups, in the repro, when on the /tabs path, the /tabs/(tab-view)/(tab1)/index.tsx does not get matched.

[tannerlinsley]

() groups really are just for organization. When the routes get created and just as @ferretwithaberet mentioned, they are unwrapped to the level of the () group. Similarly, _layout route paths are also unwrapped (but they stay nested in the layout route logic/component). You should 100% be thinking about your routes "path first", e.g. "what paths will this match?" and working off of that.

[tannerlinsley]

On closer inspection, this could indeed be a bug. We'll look into it.

[y-nk]

@ferretwithaberet thanks a lot for providing help on discord 🙏

@tannerlinsley it is now clear to me now that i know how to juggle between () and _.

although in my repro:

routes/
  tabs/
    (tab-view)/
      (tab1)/index.tsx
      tab2/index.tsx
      route.tsx
    create.tsx

as a reference, the intent (in corrected code) was:

routes/
  tabs/
    _tab-view/
      (tab1)/index.tsx
      tab2/index.tsx
      route.tsx
    create.tsx

if i follow the rules of () (i only removed the () folders), it should be resolved as:

routes/
  tabs/
    index.tsx
    tab2/index.tsx
    route.tsx
    create.tsx

meaning that:

1. tabs/index.tsx should be rendered as part of the /tabs route
2. tabs/route.tsx should be rendered as part of the tabs/create route

but none of those 2 claims are true.

instead the router behaves as if the tree was something like:

routes/
  tabs/
    _tab-view/
      -index.tsx
      tab2/index.tsx
      route.tsx
    create.tsx

That being said, routesByPath in the devtools can successfully resolve the different routes (it can see the tabs/ route id being tabs/(tab-view)/(tab1)/index.tsx)

screenshot

[nlynzaad]

@y-nk could you please confirm if this issue is still happening on the latest builds. we did some work on this in #5491 and a quick test on your repro using the latest build seemed to work swell.

[nlynzaad]

Closing this issue as this should be resolved. Please give us a shout if the problem persists

[y-nk]

@nlynzaad sorry for late reply. checking my repro, it is indeed solved.