Topic 11 of 39
Intercepting Routes
Overview
Intercepting routes allow you to load a route within the current layout while keeping the context of the current page. This is primarily used for routing modals (like Instagram's photo viewer) where clicking a photo opens a modal, but refreshing the page loads the full photo page.
Syntax
bash
app/
├── feed/
│ └── page.tsx # Contains a link to /photo/1
├── photo/
│ └── [id]/page.tsx # Full page view of the photo
└── feed/
└── (..)photo/ # Intercepts the route from within feed
└── [id]/page.tsx # Renders as a modal over feedCommon Pitfalls
- Getting the relative path marker wrong.
(.)matches the same level,(..)matches one level up,(...)matches the rootappdirectory. - Not combining intercepting routes with parallel routes (
@modal) to properly render the modal over the previous UI.
Interview Questions
Q:
When would you use an Intercepting Route?
A:
When you want to display route content (like a photo or a login form) as a modal when navigated to via client-side routing, but as a standalone full page if the user hard-refreshes or shares the URL.
Real-World Example
A social media feed where clicking an image opens a modal, but linking to the image directly shows a standalone page.
example
bash
// Links in app/feed/page.tsx:
<Link href="/photo/123">View Photo</Link>
// When clicked in feed, it hits:
// app/feed/@modal/(..)photo/[id]/page.tsx (renders as Modal)
// When refreshed manually:
// app/photo/[id]/page.tsx (renders as full page)Check Your Knowledge
Test your understanding of Intercepting Routes with these quick questions.