How to render modal/dialog as route/Outlet from Index route
Im working with @tanstack/react-router and Im trying to render a Modal/Dialog component on the
/admin/users . To do that, I put an Outlet within the parent index.tsx route. However, when I render the route for the modal @ /admin/users/add-user, the background index UI (from /admin/users ) seems to unmount entirely rather than displaying beneath the Modal.
Im reasonably sure that the issue is simply because Im not properly organizing my routes. While its not a "minimal" repro, you can see my current route setup with the bugs @ https://github.com/lancej1022/enterprise-saas/tree/main/apps/web/src/routes/(authenticated) .
If its easier, you can also view the route layout in the attached screenshot.
To be clear on what Im trying to achieve overall with this route setup:
- /login and /signup have their own UI that does not share the layout used once a user has logged in
- the authenticated portion of the app lives in the (authenticated) directory, so that a logged in user sees the authenticated dashboard at / route.
I also wasnt sure whether the (authenticated)/route.tsx file was the proper way to achieve a layout route that wraps all of the authenticated pages, but it seems to work. At this point Im mostly just lost as to why the modal at (authenticated)/admin/add-user/index.tsx doesnt display on top of the UI from (authenticated)/admin/index.tsx since the admin/index.tsx file does render an OutletGitHub
enterprise-saas/apps/web/src/routes/(authenticated) at main · lanc...
Contribute to lancej1022/enterprise-saas development by creating an account on GitHub.
12 Replies
rare-sapphire•3mo ago
you cannot render a route as child of an index route
an index route is a leaf node already
you would need to use a search param as a way to handle the modal state
absent-sapphireOP•3mo ago
That helps a ton. I realized I can also just move
/admin/users/index.tsx to /admin/users.tsx and then the modal can move to /users/add-user.tsx and that achieved the desired result.
Thanks for the fast response @Manuel Schiller !
One more clarifying question -- is the /(authenticated)/route.tsx file the proper way to create a "layout route" for everything nested within /(authenticated)?rare-sapphire•3mo ago
would rather use a pathless _authenticated name
absent-sapphireOP•3mo ago
so
/(authenticated)/_authenticated.tsx?rare-sapphire•3mo ago
no
/_authenticated/route.tsx
or, same thing: _authenticated.tsx and then put all the stuff that needs to be authed inside the _authenticated/ folderabsent-sapphireOP•3mo ago
I made the switch to
_authenticated/route.tsx but after reading through https://tanstack.com/router/latest/docs/framework/react/routing/file-naming-conventions, I'm still a little confused as to when to use _directoryName vs (directoryName) . It almost seems like they achieve identical outcomes, but Im sure theres a way in which they differ?rare-sapphire•3mo ago
originally (routegroups) did not support nesting, now they do
they are just meant to group stuff without really having any logic tied to them
absent-sapphireOP•3mo ago
So would it be fair to say that today theres no difference between routegroups versus
_pathHere?rare-sapphire•3mo ago
not sure if you can do
(foo).tsx as opposed to _foo.tsxabsent-sapphireOP•3mo ago
Makes sense. One last question, going back to the Dialog organization. Is there any performance drawback to putting the dialog on a dedicated route like I did vs using a search param?
eg
/admin/users/add-user vs /admin/users?other_search_params_here&add-user. I prefer the overall look of the /add-user suffix especially for sharing links, but idk if rendering a new route causes additional re-renders or other performance concerns compared to just toggling a search param with TSRrare-sapphire•3mo ago
dont think this has rendering implications in either case
absent-sapphireOP•3mo ago
Was hoping that would be the case. Thanks again for speedy reply and all of the help @Manuel Schiller !