fascinating-indigo

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

fascinating-indigoOP•2mo 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

fascinating-indigoOP•2mo ago

correct-apricot•2mo ago

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

fascinating-indigoOP•2mo ago

ah that's correct

correct-apricot•2mo ago

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

fascinating-indigoOP•2mo ago

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

fascinating-indigoOP•2mo ago

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

correct-apricot•2mo ago

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

fascinating-indigoOP•2mo ago

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

fascinating-indigoOP•2mo ago

correct-apricot•2mo ago

ideally, yes, those are actual routes

fascinating-indigoOP•2mo ago

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

correct-apricot•2mo 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

fascinating-indigoOP•2mo ago

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

correct-apricot•2mo ago

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

fascinating-indigoOP•2mo 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 :/

correct-apricot•2mo ago

it renders them under the parent above the ()

rare-sapphire•2mo ago

() is ignoring the segment not the content

correct-apricot•2mo ago

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

rare-sapphire•2mo ago

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

fascinating-indigoOP•2mo ago

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

rare-sapphire•2mo ago

wdym ?

fascinating-indigoOP•2mo ago

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

correct-apricot•2mo ago

he means that route.tsx kinda works with ()

rare-sapphire•2mo ago

why should it not work

correct-apricot•2mo 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

fascinating-indigoOP•2mo ago

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

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

rare-sapphire•2mo ago

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

fascinating-indigoOP•2mo 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

rare-sapphire•2mo 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

fascinating-indigoOP•2mo 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

rare-sapphire•2mo ago

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

fascinating-indigoOP•2mo ago

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

rare-sapphire•2mo ago

give me a sec

fascinating-indigoOP•2mo ago

in the end, it behaves as if it is:

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

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

correct-apricot•2mo 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

fascinating-indigoOP•2mo ago

well, yes and no

rare-sapphire•2mo ago

aah, well that's not to be expected indeed

fascinating-indigoOP•2mo ago

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

correct-apricot•2mo 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

fascinating-indigoOP•2mo 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

correct-apricot•2mo 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

fascinating-indigoOP•2mo 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

correct-apricot•2mo 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

fascinating-indigoOP•2mo ago

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

correct-apricot•2mo 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

rare-sapphire•2mo ago

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

fascinating-indigoOP•2mo ago

@notKamui yes

correct-apricot•2mo ago

create.tsx is outside of _TabsLayout

rare-sapphire•2mo ago

it renders properly

fascinating-indigoOP•2mo ago

no i dont have this xD

rare-sapphire•2mo ago

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

fascinating-indigoOP•2mo ago

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

rare-sapphire•2mo ago

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

correct-apricot•2mo ago

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

fascinating-indigoOP•2mo ago

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

correct-apricot•2mo ago

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

rare-sapphire•2mo ago

oh, right that's it

correct-apricot•2mo ago

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

rare-sapphire•2mo ago

but that's a bug

correct-apricot•2mo ago

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

fascinating-indigoOP•2mo ago

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

correct-apricot•2mo ago

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

fascinating-indigoOP•2mo 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)

correct-apricot•2mo 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)

fascinating-indigoOP•2mo ago

x) thanks a ton for the support tho

fascinating-indigoOP•2mo ago

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

correct-apricot•2mo 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?