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
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:
-
- the authenticated portion of the app lives in the
I also wasnt sure whether 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 /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 Outlet
GitHub
Contribute to lancej1022/enterprise-saas development by creating an account on GitHub.
