How would you build a shareable modal with Intercepting Routes?

Combines a canonical detail page with an intercepted modal, Parallel Route slot, browser history, and accessible dismissal.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I first create the real detail route so its URL renders a complete standalone page. Then a parallel modal slot intercepts navigation to that route and renders the same content inside an accessible dialog while preserving the current page behind it. Closing uses browser history when appropriate, and loading the URL directly or refreshing shows the full page rather than depending on hidden background state.

Full answer below

Practice focus

Intercepting Routes, Parallel Routes, deep links, refresh behavior, accessibility, and navigation semantics.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
The same URL should work as contextual modal navigation and as a complete page when opened directly.
I first create the real detail route so its URL renders a complete standalone page. Then a parallel modal slot intercepts navigation to that route and renders the same content inside an accessible dialog while preserving the current page behind it. Closing uses browser history when appropriate, and loading the URL directly or refreshing shows the full page rather than depending on hidden background state.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
The interception marker is relative to route segments, not raw folder depth, which matters around route groups and slots. The slot gets a default.tsx that returns the intended inactive state, commonly null, and the modal has focus trapping, a labelled title, Escape handling, scroll management, and focus restoration. I keep the content and data-access logic reusable so modal and page variants cannot drift. Browser tests cover click-open, deep link, refresh, back, forward, and close behavior.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Building only the modal and leaving the shared URL without a full-page route.
Counting folder levels instead of route segments in the interception marker.
Ignoring keyboard focus and browser history.

How would you build a shareable modal with Intercepting Routes?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Prerequisite

Tech stacks

Skill areas

Was this drill useful?

Found this answer useful?

Human editorial direction

How would you build a shareable modal with Intercepting Routes?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Prerequisite

Tech stacks

Skill areas

Start a conversation

Was this drill useful?

Found this answer useful?

Human editorial direction