harsh-harlequin

index route not loaded with nested group (with repro)

https://stackblitz.com/edit/github-1pegkpfq-qja16boq?file=src%2Froutes%2Ftabs%2F(tab-view)%2Ftab2%2Findex.tsx as i understand the current file-based routing should load the tab1/index.tsx component but it seems not the case.

StackBlitz

Router Quickstart File Based Example (duplicated) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

73 Replies

harsh-harlequinOP•4d ago

@ferretwithabéret thanks a ton for support 🙂 why i think it's a bug is because the devtools are properly resolving the path to match the unique route id as expected

harsh-harlequinOP•4d ago

ratty-blush•4d ago

actually, the example in the issue is not reflected in the repro in the repro you also hav e (tab-view)

harsh-harlequinOP•4d ago

ah that's correct

ratty-blush•4d ago

you cannot have route.tsx inside of () after I moved the route.tsx, to the tabs/ directory, it works

harsh-harlequinOP•4d ago

eh? but the router does load the ()/route.tsx otherwise i wouldn't see the 2nd tab

harsh-harlequinOP•4d ago

the ()/route.tsx contains the tab nav, we can see it loaded here

ratty-blush•4d ago

even though it might not error, at least afaik, that's not meant to work

harsh-harlequinOP•4d ago

ah so it's a bug that it works 🤣 so i should move to _ prefix?

harsh-harlequinOP•4d ago

ratty-blush•4d ago

ideally, yes, those are actual routes

harsh-harlequinOP•4d ago

lol it does work when mv (tab-view) to _tab-view this feels so wrong

ratty-blush•4d ago

() is only for grouping, it is not a functional segment, it is only meant to let you take other routes and put them into the same folder while _something is an actual route that does not have a URL segment

harsh-harlequinOP•4d ago

but () and _ achieve the same thing no? folder with no meaning in the url

ratty-blush•4d ago

they are similar, but not really, _ is functional, it defines a proper route, while () should be ignored by the router

harsh-harlequinOP•4d ago

i understand what you say, and i can't deny you're right but at the same time, () is not ignored by the router since it can load sub routes under it :/

ratty-blush•4d ago

it renders them under the parent above the ()

flat-fuchsia•4d ago

() is ignoring the segment not the content

ratty-blush•4d ago

the only issue is when using () and route.tsx

flat-fuchsia•4d ago

foo/(a)/bar is the same as foo/bar foo/_a/bar is NOT the same as foo/bar

harsh-harlequinOP•4d ago

i guess then it's a bug that router works with () then?

flat-fuchsia•4d ago

wdym ?

harsh-harlequinOP•4d ago

because i started all the org of my router with () 😄e

ratty-blush•4d ago

he means that route.tsx kinda works with ()

flat-fuchsia•4d ago

why should it not work

ratty-blush•4d ago

- routes/
  - (some-group)/
    - route.tsx
  - index.tsx

- routes/
  - (some-group)/
    - route.tsx
  - index.tsx

this was his setup route.tsx has an outlet but does not render index.tsx

harsh-harlequinOP•4d ago

- routes/
  - (some-group)/
    - route.tsx
      (sub-group)/
      - index.tsx

- routes/
  - (some-group)/
    - route.tsx
      (sub-group)/
      - index.tsx

flat-fuchsia•4d ago

it should, that's a bug if it doesnt same here it should render index inside the outlet

harsh-harlequinOP•4d ago

@notKamui you can look at stackblitz repro from main post. you'd see that

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

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

/tabs/tab2 -> renders tab2/index.tsx /tabs -> does not render tab1/index.tsx

flat-fuchsia•4d ago

- routes/
  - (some-group)/
    - route.tsx
  - index.tsx

is not the same as

- routes/
  - _some-group/
    - route.tsx
  - index.tsx

- routes/
  - (some-group)/
    - route.tsx
  - index.tsx

is not the same as

- routes/
  - _some-group/
    - route.tsx
  - index.tsx

well yes that's exactly what im saying its not a bug you have to understand, if you have a (foo) it's as if you can unwrap it it's not ignored as in the content of the folder are ignored

harsh-harlequinOP•4d ago

but why tho? i mean, if the (tab1) part does not matter, shouldn't it be that the structure looks like:

- routes/
  - route.tsx
  - index.tsx
  tab2/
  - index.tsx

- routes/
  - route.tsx
  - index.tsx
  tab2/
  - index.tsx

flat-fuchsia•4d ago

it's ignored as in you unwrap its content yes isnt that what you said ?

harsh-harlequinOP•4d ago

that's what i'd expect but it isn't what's happening

flat-fuchsia•4d ago

give me a sec

harsh-harlequinOP•4d ago

in the end, it behaves as if it is:

- routes/
  - route.tsx
  tab2/
  - index.tsx

- routes/
  - route.tsx
  tab2/
  - index.tsx

ratty-blush•4d ago

yeah, i'd also expect the repro to unwrap to:

- routes/
  - tabs/
    - tab2/
      - index.tsx
    - index.tsx // Tab 1
    - route.tsx
    - create.tsx

- routes/
  - tabs/
    - tab2/
      - index.tsx
    - index.tsx // Tab 1
    - route.tsx
    - create.tsx

harsh-harlequinOP•4d ago

well, yes and no

flat-fuchsia•4d ago

aah, well that's not to be expected indeed

harsh-harlequinOP•4d ago

because here @ferretwithabéret you have create.tsx at the same level than the route.tsx, which is incorrect.

ratty-blush•4d ago

but create.tsx and route.tsx are separated by another group which gets unwrapped if you want to logically separate them, you use a pathless route

harsh-harlequinOP•4d ago

should be more like:

- routes/
  - tabs/
    - tab2/
      - index.tsx
    - index.tsx // Tab 1
    - route.tsx
  - tabs.create.tsx

- routes/
  - tabs/
    - tab2/
      - index.tsx
    - index.tsx // Tab 1
    - route.tsx
  - tabs.create.tsx

so that the create.tsx isn't wrapped by tabs/route.tsx

ratty-blush•4d ago

yeah, I am not saying what the behavior you want is, I am saying what you wrote in the repro unwraps to if you want create.tsx to not be wrapped by route.tsx but you want the path to be affected, you use a pathless route

harsh-harlequinOP•4d ago

no it's not correct. if you navigate to the create tab, it does not contain the tabs navigation but if you'd put create.tsx at the same level as route.tsx, it'd contain it

ratty-blush•4d ago

i am talking about how it should've been interpreted, not about what the current result is, as we already found out the current result is buggy

harsh-harlequinOP•4d ago

ok but it is a bug, right? because you seem to say no, but @notKamui not sure yet x)

ratty-blush•4d ago

so, again, the structure you have in the repro still does not reflect the behavior you want, what you want is:

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

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

flat-fuchsia•4d ago

tf i have this which is the same as you, i think

harsh-harlequinOP•4d ago

@notKamui yes

ratty-blush•4d ago

create.tsx is outside of _TabsLayout

flat-fuchsia•4d ago

it renders properly

harsh-harlequinOP•4d ago

no i dont have this xD

flat-fuchsia•4d ago

it works fine for me or at least it works as expected per the docs

harsh-harlequinOP•4d ago

the version installed is latest (i just checked just in case)

flat-fuchsia•4d ago

this makes no sense to me i seemingly have the same setup but it works for me tab1 DOES render

ratty-blush•4d ago

it works when you dont have the tabs/ folder, like they have

harsh-harlequinOP•4d ago

(you can say "he/his" 🙂 !)

ratty-blush•4d ago

alright, I am usually trying to adopt a gender neutral language, sometimes i slip pronouns and I edit my messages to fix it 💀

flat-fuchsia•4d ago

oh, right that's it

ratty-blush•4d ago

it's also odd, that route.tsx almost works with (), when afaik it should not

flat-fuchsia•4d ago

but that's a bug

ratty-blush•4d ago

i mean that, when on the create route it does not render the route.tsx

harsh-harlequinOP•4d ago

if ()/ works 100% then it covers also _pathless/ so it's an overlapping feature

ratty-blush•4d ago

yeah, thing is, it should not work like _pathless/, that's the catch

harsh-harlequinOP•4d ago

that on the create route it does not use the route.tsx feels normal to me, although i understand why you say it should (because () is not _) at least i understand why i should move to _ 🙏 but omg this bug made me switch my mind that () is equal to _ with a tiny bug and also, it works 100% at routes/ level but not nested (as @notKamui tested)

ratty-blush•4d ago

yeah () should work like that folder isnt even there and the files inside of it are on the level the () folder is on, hence why it is only for "visual grouping", as it should have no effect on the routes themselves while _pathless/ is IIRC () was added when I started using tanstack and I did not know pathless routes existed 💀, but they added it then for grouping only https://discord.com/channels/719702312431386674/1213065271590522920 yeep, blame me for () kekw I literally just wanted a pathless route then, but I did not know how they worked (i did not know how route.tsx worked either and everything was so confusing)

harsh-harlequinOP•4d ago

x) thanks a ton for the support tho

harsh-harlequinOP•4d ago

fyi that's my real app routes. i'm really digging the () 😄

ratty-blush•4d ago

I added a comment on your GH issue to point to this thread and summarize what was talked.

Gaming

Programming

index route not loaded with nested group (with repro)

Did you find this page helpful?