Breadcrumbs solution requiring 3 files per component?!
I created a working bizarre solution for breadcrumbs, see live minimal example:
https://stackblitz.com/edit/tanstack-router-y2cazlrs?file=src%2Froutes%2Fsettings%2Fall-users%2Fedit%2F%24id%2Findex.lazy.tsx,src%2Froutes%2Fsettings%2Fall-users%2Fedit%2F%24id%2Findex.tsx,src%2Froutes%2F__root.tsx,src%2Froutes%2Fsettings%2Fall-users%2Findex.tsx,src%2Froutes%2Fsettings%2Fall-users%2Froute.tsx,src%2Froutes%2Fsettings%2Fall-users%2Fedit%2F%24id%2Froute.tsx,src%2Froutes%2Fsettings%2Fall-users%2Findex.lazy.tsx,src%2Fmain.tsx
however in order to support lazy loading, static data, beforeLoad for crumb title and using the Matches pattern in official example I had to have 3 files per route.
Any other more reasonable solution made something break. What am i doing wrong? how can i bring this down to 2 files per component?
StackBlitz
skipped-match-minimal-example (duplicated) - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
9 Replies
stormy-gold•4mo ago
tehnically, you create 2 routes per route at the moment
stormy-gold•4mo ago
stormy-gold•4mo ago
-
settings/all-users/edit/123 matches for route.tsx
- settings/all-users/edit/123/ matches for index.tsx
you are already using autoCodeSplitting: true, you could combine index.tsx with index.lazy.tsx
or is that what's breaking it?
you could also tehnically only use route.tsx, but that would require some sort of mechanism to detect when to render the content and when to use Outlet as the componentround-purpleOP•4mo ago
If i'm not using
route.tsx then the all-users component route does not appear in the matches. If i'm not using index.tsx in addition -- then the edit/123 is matched but not rendered when i select a user. all-users keeps being rendered instead :/stormy-gold•4mo ago
yeah, like I said, currently you define 2 routes that both match for that path, as seen in the above screenshot from the devtools
if you want only 1 match, you have to use
route.tsx only, but you need to somehow decide to render either your route component or <Outlet /> (to allow other nested routes to render)
otherwise, your approach is fine, what I said is that you do not need index.lazy.tsx
https://stackblitz.com/edit/tanstack-router-rlb78w2w?file=src%2Froutes%2Froute.tsx,src%2Froutes%2Fsettings%2Fall-users%2Froute.tsx
made a proof of concept using useChildMatches
this uses a single route.tsx file
The logic could be extracted into a HoC (though, not sure how it would interact with autoCodeSplitting)round-purpleOP•4mo ago
I see. Thank you for your answers! Would adding
route.lazy.tsx solve the potential lazy loading problem if we use th HoC approach you suggested?stormy-gold•4mo ago
tbh, idk, you can try testing it and reporting it back if it does not work
yeah, auto code splitting does not work with a HoC seems to work, something else was at play
I've updated the stackblitz above, and it works quite well
Cleaned up the code a bit too
round-purpleOP•4mo ago
Thanks a lot, this seems to work really well and quite scalable. Are there sources besides tanstack.com (or maybe I missed somthing there) where I can read more about the differences between route.tsx and index.tsx approaches?
stormy-gold•4mo ago
They are not that complicated, the metal model I use is:
- use
index.tsx for leaf routes (as they do not allow other routes to nest under themselves);
- use route.tsx whenever nesting is required e.g. layouts or to place loaders reused by multiple child routes (usually for precaching data when using tanstack query)
tldr the difference is
this will lead to Something > SomethingElse being rendered when on /something/something-else
while
will lead to just SomethingElse being rendered on /something/something-else
same thing goes for route matches, with the first approach, in the matches array of the router you will see 2 routes, while with the 2nd approach you will only see 1