How to implement Route-Based Modals
Hello,
I'm currently working on a project where I need to create a route-based modal that can be displayed on every page. In Next.js, this is referred to as Parallel Routes. I've noticed that TanStack also has a concept of Parallel Routes, but I haven't been able to find any documentation on it yet. The goal is to use this modal for user login, and I'm using file-based routes.
So far, I've tried two different approaches:
Route Masking: This method resulted in an issue where the parent component content disappears.
Loading the modal using search params: This method works, but I don't have access to useRouteContext.
I'm wondering if anyone has any advice on how to solve this issue. Is it possible to achieve this with the router in its current state? Any help would be greatly appreciated!
Thanks in advance!
12 Replies
fascinating-indigo•16mo ago
I am in the same boat. I am using shadcn and I have a page where I need to open different content in a sheet component. Anyone out there with some ideas or examples?
adverse-sapphire•16mo ago
parallel routes are not supported right now but we will tackle this in the near future
fascinating-indigo•16mo ago
so there is no workaround for this at all? It absolutely requires parallel routes?
adverse-sapphire•16mo ago
what's the problem with using search params?
fascinating-indigo•16mo ago
Well, that's why I am asking. I don't know how to do search params yet. So I am trying to figure out how to accomplish above. I love tanstack, but not being able to have routes in modals and drawers would be a pretty big deal-breaker it seems to me. In general, the docs are not very beginner friendly and don't really showcase examples. Clearly there is a need for examples and I am willing and eager to help as I learn more. So thanks, knowing that the answer might be search params gives me a starting point. But nobody responded to @ssf01 letting them know that while we don't have parallel routing, you could likely use search params for now.
flat-fuchsia•16mo ago
@jkinley most likely you want to solve this with search params
fascinating-indigo•16mo ago
thank you. working on it
fascinating-indigo•16mo ago
So I have done some work on this and have this stackblitz demo. Why don't the seach params appear in the url? https://stackblitz.com/edit/vitejs-vite-5df5ym?file=src%2Froutes%2F_main-layout.tsx,src%2Froutes%2F_main-layout%2Fsearch.tsx
fascinating-indigo•16mo ago
So this example, I am not making an <Outlet> for the drawer content but instead using conditional rendering. This does not seem as robust as using an outlet. So I am not sure I am doing this correctly. The one thing that is nice about using search params, is that your state is captured in the URL. This is a plus to this method.
adverse-sapphire•16mo ago
Why don't the seach params appear in the url?they appear in the url
adverse-sapphire•16mo ago
to see the search params in stackblitz you need to open the preview in a separate tab
fascinating-indigo•16mo ago
ahhh. great. I guess I figured it out then. Thanks.