Does using parallel route with intercepted route need layout in same folder?
Unanswered
Acacia-ants posted this in #help-forum
Acacia-antsOP
I have a routing like so:
I thought that I could use intercepting routes and parallel routes in this way so that when user navigates to:
I have tried a folder structure where I duplciate the route in the root
What would be the best and most correct way of implementing a modal component like so?
I also tried moving the @sheet/default.tsx folder and file to the subdirectory, with no difference in behavior.
becuase of whats happening, and that the only time it has worked is when the @modal was in the same directory as the layout.tsx file where it is being consumed, I assume that parallel route folder must be in the same folder as layout.tsx? Would love some guidance
/(dashboard)/layout.tsx: Root layout (takes in modal as a param to render in layout after {child})/(dashboard)/@modal/default.tsx: Contains default.tsx file for @modal parallel route/(dashboard)/admin/user/admin/page.tsx: List of admin users/(dashboard)/admin/user/admin/add/page.tsx: Add admin users/(dashboard)/admin/user/admin/[id]/page.tsx: Update admin users/(dashboard)/admin/user/admin/@modal/(.)add/page.tsx: Add admin users (modal version)/(dashboard)/admin/user/admin/@modal/(.)[id]/page.tsx: Update admin users (modal version)I thought that I could use intercepting routes and parallel routes in this way so that when user navigates to:
/admin/user/admin/add from /admin/user/admin it will display the modal, but currently nothing happens.I have tried a folder structure where I duplciate the route in the root
@modalfolder like so:/(dashboard)/@modal/admin/user/admin/add/page.tsx but when doing so, it loads the /admin/user/admin/add route in the background instead of /admin/user/admin in the background.What would be the best and most correct way of implementing a modal component like so?
I also tried moving the @sheet/default.tsx folder and file to the subdirectory, with no difference in behavior.
becuase of whats happening, and that the only time it has worked is when the @modal was in the same directory as the layout.tsx file where it is being consumed, I assume that parallel route folder must be in the same folder as layout.tsx? Would love some guidance
3 Replies
Acacia-antsOP
Update just discovered that the desired behvaior works when doing the following
It seems like it has to be in the same folder as where the layout.tsx file exists...
Any cleaner way of acheiving the same behvaior without duplciating path routes as folders starting from @modal in root?
/@modal/admin/user/admin/(.)add It seems like it has to be in the same folder as where the layout.tsx file exists...
Any cleaner way of acheiving the same behvaior without duplciating path routes as folders starting from @modal in root?
Another issue is the router.push is not making the modal close. but router.back is any way to solve this?
Acacia-antsOP
I added a page.ts that returns null inside /@modal/admin/user/admin/page.ts folder