Tearing my hair out... route groups misunderstanding? );
I've read and re-read the docs as well as cloned and looked through the nv-rental-clone demo app from @Sean Cassiere but I can't figure out why my routes with route groups won't render properly.
For context, simple routing stuff was working, but we want to use slugs for some things so I overhauled the structure some to try and use more best practices.The screenshot shows my current layout. For
/login I get the _public wrapper rendered, but not the login.tsx page. I tried giving the exact match /login._index.tsx a wrapper (/login.tsx) with an outlet (thanks grok) and that didn't work either :worryCryHands:
For /properties I get an error:
Invariant failed: Could not find an active match from "/(properties)/(properties)"
I've gone over my __root.tsx,_auth.tsx, _public.tsx (which is just an outlet basically), and my main.tsx and auth.tsx are also set up properly (pretty sure anyways). No idea where this problem comes from. I did notice one thing:
- In Sean's app, he uses this syntax for exact path matching:
file agreements._index.tsx -> createFileRoute("/_auth/(agreements)/agreements/")
(this format is shown in the docs in index routes)- However, when I try to type the path, I get an autocomplete suggestion for this format: file
properties._index.tsx -> createFileRoute("/_public/(properties)/properties/_index")
Not sure if that has anything to do with why my route groups aren't working, but I'm at a loss about what's going on at this point. I'm happy to share code if someone thinks the problem is in a certain file.
Any insight is appreciated... I feel like there has to be some config setting or something simple that I'm doing wrong :angryredgoobler:
10 Replies
foreign-sapphireOP•3mo ago
I don’t think this is the issue though. Sean has the same structure:
https://github.com/SeanCassiere/nv-rental-clone/tree/master/src/routes
foreign-sapphireOP•3mo ago
As per my issue description
…simple routing stuff was working, but we want to use slugs for some things so I overhauled the structure some to try and use more best practices.
fascinating-indigo•3mo ago
Could you throw your setup into a stackblitz repo? I can help you from there.
noble-gold•3mo ago
this is exactly how you do layout routes though…
foreign-sapphireOP•3mo ago
https://stackblitz.com/edit/vitejs-vite-3nkcecit?file=src%2Froutes%2F_public%2F(signup)%2Flogin._index.tsx
Project is set up and dev server is happy.
I’m not very familiar with stackblitz and for some reason I can't get seem to get beyond the blue background on the index.html file in the stackblitz preview , but the routeTree is there and I'm still getting
createFileRoute('/_public/(signup)/login/_index') auto generated instead of createFileRoute('/_public/(signup)/login/') like I think I should be. :PES_CryHug:foreign-sapphireOP•3mo ago
@Sean Cassiere :PES4_CouchLurk:
fascinating-indigo•3mo ago
Hey, sorry was out.
Will take a look at your sandbox.
fascinating-indigo•3mo ago
I think the problem is that while your sandbox followed my sample project, it didn't copy over the customization options which I had set in my
vite.config.ts file. Specifically, the routeToken and indexToken options.
https://github.com/SeanCassiere/nv-rental-clone/blob/036f47ff2b21d4320e9ebf0c2e6621e8deffc3a8/vite.config.ts#L35-L36GitHub
nv-rental-clone/vite.config.ts at 036f47ff2b21d4320e9ebf0c2e6621e8d...
Navotar with Tailwind and Tanstack Router and Query - SeanCassiere/nv-rental-clone
fascinating-indigo•3mo ago
With that added in, the only thing remaining was to fix up some syntactic errors in the JSX and everything looks to be rendering as expected
https://stackblitz.com/edit/vitejs-vite-4sbv1bw9?file=src/routes/_public/(properties)/properties.index.tsx
foreign-sapphireOP•3mo ago
Thanks so much! Legend