Is a parallel and intercepting route suitable for a login/register modal popup?
Unanswered
Least Auklet posted this in #help-forum
Least AukletOP
I have a login/register button in the header navigation bar, and I created a modal popup for login or registration using parallel and intercepting routes. When the button is clicked, the modal works. The problem is that even on the login/register page, the popup appears when I click the login/register button. For this scenario, is a parallel and intercepting route modal suitable?
2 Replies
@Least Auklet I have a login/register button in the header navigation bar, and I created a modal popup for login or registration using parallel and intercepting routes. When the button is clicked, the modal works. The problem is that even on the login/register page, the popup appears when I click the login/register button. For this scenario, is a parallel and intercepting route modal suitable?
do you have
default.tsx?export default function Default() {
return null
}American Woodcock
Hey man. Did you find a solution to this?
https://codesandbox.io/p/devbox/login-register-parallel-example-zw9m7m
TL;DR: Try hard-navigating to either "/auth/login" or "/auth/register" and then click on one of the 4 links. It triggers the modal. I don't want that.
As you can see, I have an "/app/auth" route with two subroutes, "login" and "register".
In the "/app/auth/layout.tsx" file, I have added the ability to tab between the two.
Also, in my root layout, I have a header with a link to "/auth/login" and a link to "/auth/register". If you click on one of those links, the parallel route "/app/@authModal" is triggered. As for the layout under "/app/@authModal", it's the exact same as the layout under "/app/auth", except that this one is wrapped in a modal.
Everything works fine, except for that when you're hard-navigating to "/auth/login" or "/auth/register" and you then click on either the two links in the header or the two tab links, it triggers the modal. I don't want that (though I believe it's the expected behavior).
I've played around with route groups, useSelectedLayoutSegment, etc, but I just cannot figure it out.
https://codesandbox.io/p/devbox/login-register-parallel-example-zw9m7m
TL;DR: Try hard-navigating to either "/auth/login" or "/auth/register" and then click on one of the 4 links. It triggers the modal. I don't want that.
As you can see, I have an "/app/auth" route with two subroutes, "login" and "register".
In the "/app/auth/layout.tsx" file, I have added the ability to tab between the two.
Also, in my root layout, I have a header with a link to "/auth/login" and a link to "/auth/register". If you click on one of those links, the parallel route "/app/@authModal" is triggered. As for the layout under "/app/@authModal", it's the exact same as the layout under "/app/auth", except that this one is wrapped in a modal.
Everything works fine, except for that when you're hard-navigating to "/auth/login" or "/auth/register" and you then click on either the two links in the header or the two tab links, it triggers the modal. I don't want that (though I believe it's the expected behavior).
I've played around with route groups, useSelectedLayoutSegment, etc, but I just cannot figure it out.