ही 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 समस्या सोडवतात — स्वतंत्र पेन्स आणि संदर्भ ओव्हरले — ज्यांना पूर्वी महत्त्वपूर्ण हाताळणी मार्ग/राज्य कार्य आवश्यक होते.