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!
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!
