ఇవి అధ్వాన్స్ UI లేআউట్ల కోసం App Router యొక్క రెండు అధ్వాన్స్ ఫీచర్లు. అవి ఫోల్డర్-కన్వెన్షన్ సింటాక్స్ను పంచుకుంటాయి.
సమాంతర కార్యమార్గాలు ఒకే లేআউట్ను బహుళ స్వతంత్ర మార్గ "స్లాట్లను" ఏకకాలంలో రెండర్ చేయడానికి అనుమతిస్తుంది, ప్రతిదానికి దాని స్వంత లోడింగ్/ఎర్రర్ స్టేట్ ఉంటుంది. మీరు @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)
ఇంటర్సెప్ట్ మార్కర్లు ((.) అదే స్థాయి, (..) ఒకటి పైకి, (...) రూట్) ఏ సెగ్మెంట్ ఇంటర్సెప్ట్ చేయబడిందో నియంత్రిస్తాయి. ఇది సరిగ్గా ఎలా ఇన్స్టాగ్రామ్-స్టైల్ "ఫోటో మోడల్లో తెరుచుకుంటుంది కానీ దాని స్వంత URL ఉంటుంది" నమూనా పనిచేస్తుంది.
సమాంతర కార్యమార్గాలు సంక్లిష్ట, స్వతంత్రంగా-లోడింగ్ మల్టీ-పేన్ లేআউట్లను (డ్యాష్బోర్డ్లు) క్లీన్గా ప్రారంభిస్తాయి; అంతరాయ కార్యమార్గాలు "నిజమైన URL లతో మోడల్" నమూనాను (శేయరేబుల్, రిఫ్రెష్-సేఫ్, బ్యాక్-బటన్-ఫ్రెండ్లీ) ఇచ్చుకుంటాయి, ఇది ఇతరవిధంగా నిర్మించడం కష్టం.
వారు అధ్వాన్స్, కానీ వారు నిజమైన UX సమస్యలను పరిష్కరిస్తారు — స్వతంత్ర ప్యానెల్లు మరియు సందర్భ ఓవర్లేలు — ఇవి గతంలో గణనీయమైన మానవ రూటింగ్/రాష్ట్ర పని అవసరం.