Intercepting Routes: Is there any way to determine if you are on an intercepted modal

[jumanahxleonardo]

Summary

Scenario - our user has clicked on a photo in the feed and we have "fake" routed to the url such as photo/1234-23234-3434 and it opens in a modal via an intercepting route. This logic is working correctly.

1. Need a way to know which page we are actually on - behind the modal - because router.back() cannot be used for all scenarios, since we might need to know and pass this pathname around.

2. Need a way to determine from some way in the intercepting modal layout if we are in the intercepting modal url vs the actual deep link url

@modal / layout.tsx

Additional information

No response

Example

No response

[SametDulger]

Hi @jumanahxleonardo,

Great question! With Next.js App Router’s intercepting routes (like modals), detecting whether you’re currently showing a modal versus the underlying “deep link” page can be tricky but doable.

Possible approaches:
Use usePathname or useSelectedLayoutSegments
In your modal layout or component, call usePathname() from next/navigation to get the current URL path. Then compare it with your known deep link routes to infer if you’re in a modal route.

Check search params or state
If you’re using query parameters or URL state to open modals, check those inside the modal component to determine modal state.

Leverage useRouter history state
You can store the previous path or “background” path before opening the modal in React state or context, and pass it down or access it inside the modal layout.

Custom context or store
Set a flag when opening the modal route (e.g., a React context or Zustand store) that the modal is active, so inside your modal layout you can detect it.

Summary
There’s no built-in Next.js API that directly exposes “intercepted modal vs full page” state, but combining usePathname() and your app logic (query params, stored background route) can help you detect this reliably.

Let me know if you want example code snippets or help implementing this!

[adamstickley]

Hello Mr. LLM - snippets would be great.

[CoderDeltaLAN]

Short answer
Yes. Put the intercepted UI in a parallel route (e.g. @modal) and let that slot’s layout expose a React context like isModal = true. Any page rendered through the intercepted route will read isModal, while the deep link page won’t.

---

Pattern A — Slot context (recommended)

File structure

app/
  layout.tsx
  feed/page.tsx

  photo/[id]/page.tsx            // deep link full page

  @modal/                         // parallel slot for intercepted UI
    layout.tsx                    // sets context isModal = true
    (.)photo/[id]/page.tsx        // intercepted version rendered as a modal

app/@modal/layout.tsx

'use client'

import { createContext, useContext } from 'react'

const ModalCtx = createContext(false)
export const useIsModal = () => useContext(ModalCtx)

export default function ModalLayout({ children }: { children: React.ReactNode }) {
  return (
    <ModalCtx.Provider value={true}>
      {/* Render on top of the background route */}
      {children}
    </ModalCtx.Provider>
  )
}

app/@modal/(.)photo/[id]/page.tsx

'use client'

import { useRouter } from 'next/navigation'
import { useIsModal } from '../layout'

export default function PhotoModal({ params }: { params: { id: string } }) {
  const router = useRouter()
  const isModal = useIsModal()

  // You can now branch logic:
  // render as a modal, add blur/backdrop, different close behavior, etc.
  const close = () => {
    // Prefer back if we have history, otherwise push to a safe route
    if (history.length > 1) router.back()
    else router.push(`/photo/${params.id}`)
  }

  return (
    <div role="dialog" aria-modal="true">
      <button onClick={close}>Close</button>
      <img src={`/api/photos/${params.id}`} alt="" />
      <p>isModal = {String(isModal)}</p>
    </div>
  )
}

app/photo/[id]/page.tsx (deep link page, no modal context)

export default async function PhotoPage({ params }: { params: { id: string } }) {
  // Regular full-page rendering
  return <img src={`/api/photos/${params.id}`} alt="" />
}

Result: useIsModal() is true only when the route is rendered through the intercepted slot (@modal). For the deep link page it’s false.

---

Pattern B — History-aware close behavior (optional)

If you want different “close” logic depending on whether there’s a background route:

'use client'
import { useRouter } from 'next/navigation'

export function useSmartClose(fallbackHref: string) {
  const router = useRouter()
  return () => {
    // `history.state?.idx` exists in Next.js app router navigations
    const idx = (history.state && (history.state as any).idx) ?? 0
    if (idx > 0) router.back()
    else router.replace(fallbackHref)
  }
}

Use in the modal:

const close = useSmartClose('/feed')

---

Notes

• There’s no built-in “am I intercepted?” API. The slot layout context is the robust way.
• useSelectedLayoutSegments('modal') can tell if the slot has content from a parent layout, but the component itself won’t know unless you pass that down (hence the context).
• Example docs: Intercepting Routes and Parallel Routes on nextjs.org.

If this helps, please Mark as answer so others can find it.