ये App Router की दो उन्नत सुविधाएं हैं जो परिष्कृत UI लेआउट के लिए हैं। वे फ़ोल्डर-कन्वेंशन सिंटैक्स साझा करते हैं।
समांतर मार्ग एक ही लेआउट को कई स्वतंत्र रूट "स्लॉट्स" को एक साथ प्रस्तुत करने की अनुमति देते हैं, प्रत्येक के अपने लोडिंग/त्रुटि स्थिति के साथ। आप @name फ़ोल्डर्स के साथ स्लॉट्स को परिभाषित करते हैं:
app/
layout.tsx
@team/page.tsx → a slot
@analytics/page.tsx → another slot
// app/layout.tsx — slots are passed as named props
export default function Layout({
children,
team, // ← @team slot
analytics, // ← @analytics slot
}: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) {
return <><nav /> {children} <aside>{team}{analytics}</aside></>;
}
प्रत्येक स्लॉट स्वतंत्र रूप से नेविगेट और लोड करता है — डैशबोर्ड के लिए बहुत अच्छा है जहां पैनल अलग से अपडेट होते हैं, या एक ही समय में दो सेक्शन दिखाते हैं।
अवरोधक मार्ग आपको नेविगेशन को "पकड़ने" और इसे वर्तमान संदर्भ में (जैसे एक मोडल) एक पूर्ण पृष्ठ के बजाय प्रस्तुत करने देते हैं — जबकि अभी भी एक वास्तविक, साझा URL होता है।
app/feed/page.tsx
app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed
app/photo/[id]/page.tsx → the full page (on direct visit / refresh)
Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123
Refresh or share that URL → renders the FULL photo page (no interception)
अवरोधन मार्कर ((.) समान स्तर, (..) एक ऊपर, (...) रूट) नियंत्रित करते हैं कि कौन सा सेगमेंट अवरोधित है। यह बिल्कुल वही है कि Instagram-शैली "फोटो मोडल में खुलता है लेकिन इसका अपना URL है" पैटर्न कैसे काम करता है।
समांतर मार्ग जटिल, स्वतंत्र-लोडिंग बहु-पैन लेआउट (डैशबोर्ड) को स्वच्छ रूप से सक्षम करते हैं; अवरोधक मार्ग "वास्तविक URL के साथ मोडल" पैटर्न (साझा योग्य, ताज़ा-सुरक्षित, बैक-बटन-अनुकूल) प्रदान करते हैं जो अन्यथा बनाने के लिए मुश्किल है।
ये उन्नत हैं, लेकिन वे वास्तविक UX समस्याओं को हल करते हैं — स्वतंत्र पैनल और संदर्भ ओवरले — जिनके लिए पहले महत्वपूर्ण मैनुअल रूटिंग/स्थिति कार्य की आवश्यकता थी।