Intercepting routes allow you to load a route from another part of your application within the current layout.
Interactive Simulation Engine
Modal vs. Full Page Logic
URL-aware UI Interception
example.com/photos
CLICK ME
The user is browsing the photo feed. Click a photo to trigger the intercepted route.
Executable Code Workbench
page.tsx
Live Code Editor1// Folder named (.)photo/[id]
2// The (.) syntax intercepts the sibling route
3
4export default function PhotoModal() {
5 return <Modal>Photo UI</Modal>
6}Mental Model
A 'sneak peek' or an overlay. When you click a photo in a feed, it opens in a modal (intercepted), but refreshing the page loads the full photo page.
Why This Exists
To create modern UI patterns like modals that have their own URL, allowing them to be shared or bookmarked.
Critical Note
"Developers often confuse this pattern with traditional client React. Use the Live Code Workbench above to simulate execution."