Next.js Discord

Discord Forum

Escape from intercepted route

Unanswered
Selkirk Rex posted this in #help-forum
Open in Discord
Selkirk RexOP
Hi *,

is there actually no way to navigate away from an intercepted route? (by client-navigation)

I'm rendering a dialog from within an intercepted route. This dialog contains a form which, when submitted successfully should navigate to another page. (using router.push, but just using a next-link does not work either, same behavior)

The structure looks as following:

/products/page.jsx (opens the modal)
@modal/(.)inquiries/new/page.jsx (renders the modal)
@modal/(.)inquiries/[id]/page.jsx (returns null -> closes the modal when present)
/inquiries/[id]/page.jsx (want to navigate to)


When I now navigate to /inquiries/[id] from within the modal, the modal closes, the url gets properly updated, but no navigation happens (stays on /products)

When I drop @modal/(.)inquiries/[id]/page.jsx, the navigation works as expected, but the modal does not close.

Any hints? 🙂

1 Reply

Selkirk RexOP
Okay, seems there is no working pattern for this provided by nextjs.
After applying one hacky solution after another I finally ended up just sequentially performing back() and push().

export function useModalRedirect() {
  const router = useRouter()

  return useCallback((path, inModal = false) => {
    if(!inModal) {
      router.push(path)

      return
    }

    function onPop() {
      window.removeEventListener("popstate", onPop)
      router.push(path)
    }

    window.addEventListener("popstate", onPop)
    router.back()
  }, [router])
}