Intercepted modal navigation

Link-level previews

Two links can point to the same truth and still create different experiences. Use link-level interception when only selected links should show a canonical destination through contextual UI.

<Link to="documents.details" params={{ documentId: document.id }}>
  {document.title}
</Link>

<Link
  to="documents.details"
  params={{ documentId: document.id }}
  intercept={{
    slot: 'modal',
    view: DocumentPreview,
  }}
  preventScrollReset
>
  Preview document
</Link>

Both links target the same canonical route. The second link asks the router to render that route through the modal slot for this navigation only.

Bypass configured interception

Sometimes the full page is the point. Use intercept={false} when a route should render canonically even if the active route has a configured intercept for the target.

<Link to="create" intercept={false}>
  Open full create page
</Link>

The same opt-out is available for programmatic navigation:

await router.navigate.replace('/create', { intercept: false });

Use this in login redirects, deep-link recovery flows, and actions where contextual modal rendering would be surprising.

Configured interception versus call-site interception

Configured route intercepts define stable product behavior. Link-level interception is useful for a specific affordance. Call-site intercept payloads must be history-cloneable; component functions and other non-cloneable values cause DataCloneError in browser history.