Parallel and Intercepting Route Modals

[eric-mathison]

I'm currently playing around with parallel and intercepting routes with the aim to have two modals for each a login and a register form. My goal is to have these setup with parallel/intercepted routes since they gracefully failback to a hard routed page for instances where the user doesn't support JavaScript. (I'm still on the fence about supporting progressive enhancement)...

I'm running into an issue where if you link from one modal to another modal, the first modal remains on the screen. For example, you have a link from your login form to the registration page.

To add to this problem, from any of the modals, if you click on a link to the parent URL (ie '/' if your route is '/login') the url will change, but the modal will remain on screen.

I setup a sandbox that demonstrates this error. https://codesandbox.io/p/devbox/parallel-modal-test-wfqym4

Has anyone found a way around this or maybe a different pattern / flow that doesn't run into this issue? I'm thinking for now, just limit the modal to the login form and not the registration form.

[ynng3]

In this code, RootLayout always renders the children and two modals (pageonemodal, pagetwomodal). However, if you want each modal to appear differently when the route is /pageone or /pagetwo, with the current structure, both modals can be rendered simultaneously.

Use conditional rendering.

your code

// app/layout.tsx
{pageonemodal}
{pagetwomodal}

change code

// app/layout.tsx
import { useRouter } from "next/router";

...

const router = useRouter();

...

{router.pathname === "/pageone" && pageonemodal}
{router.pathname === "/pagetwo" && pagetwomodal}

[eric-mathison]

I thought that was the purpose of having a catchall route.

[ynng3]

@eric-mathison
If you do not manage the state of isOpen in the Modal component, the isOpen of another rendered Modal does not change to false just because another modal is opened.

You need to control the isOpen of previously opened modals using a global state management library such as Redux, or conditionally render as I suggested above.

I simply recommended conditional rendering because it is the simplest way to modify the current situation without installing additional modules.

[eric-mathison]

@ynng3
Okay, I believe I understand where your going with this.
I did some editing and I seemed to figure it out. Now, if this has any side effects, I don't know. Time will tell, but for now it seems to work.

[ynng3]

Hope to see you with a great project :)

[eric-mathison]

For anyone having this issue, here is what I've learned to get this to work.

1. If you are using parallel / intercepted routes for modals in the root layout or a layout that is shared with a lot of routes, put all the intercept routes under one parallel route. If you have multiple parallel routes, both modals will show.

@modals
   - (.)pageone
   - (.)pagetwo
pageone
pagetwo
layout.tsx

2. Since layouts don't re-render, if you navigate back to a parent route/page, the modal will still be in the dom and will display on the page. To prevent this, an extra condition needs to be in place on the intercepted page. Thanks for the tip here @ynng3

// (.)pageone/page.tsx
"use client";
import { usePathname } from "next/navigation";
import { PageModal } from "@/app/components/modal";
import Link from "next/link";

export default function PageOneModal() {
  const pathname = usePathname();
  return (
    pathname === "/pageone" && (
      <PageModal heading="Page One Modal">
        ...
      </PageModal>
    )
  );
}

3. Using the replace prop on Link when navigating from a modal, in my opinion, makes for a better UX.

The sandbox is updated to reflect these changes.
https://codesandbox.io/p/devbox/wfqym4

[H7ioo]

Here is what I'm struggling with.
Assuming I have the following

// app/pageone/page.tsx
<Link href="pagetwo">Page 2</Link>

when the link is clicked it will trigger a modal which I don't want to happen