Need a way to force clear layout slots during navigation in Parallel Routes

[yutakobayashidev]

In Next.js, when using Parallel Routes, the layout slots are not automatically cleared when navigating between routes, which creates issues when interacting with dynamic UI elements like modals. Specifically, when trying to expand a modal or adjust its layout while staying on the same URL, the layout slot often persists the previous state, leading to unintended UI elements being shown alongside the modal.

Currently, navigation with router.push or router.replace does not clear the layout slot in parallel routes, and there is no built-in mechanism to reset it to ensure the new layout renders cleanly. While router.back() works for some scenarios, it's not a flexible solution when the goal is to modify the layout (such as expanding a modal) without changing the route or URL.

Expected Behavior:

There should be a way to force the layout slot to reset or clear during navigation while remaining on the same route. This would allow components like modals to expand and contract seamlessly without leftover UI elements from the previous layout.

Use Case:

The main use case is expanding a modal on the same URL without retaining any prior layout state in the background. For example, when a modal is expanded to occupy the full screen, we would want to ensure that any previous content or UI elements that may have been rendered in the same layout slot are removed or reset, providing a clean and consistent view for the user.