Tai yra dvi išplėstinės App Router funkcijos sudėtingiems UI maketams. Jie dalijasi aplanko konvencijos sintakse.
Lygiagretūs maršrutai leidžia vienam maketažiui atvaizduoti kelis nepriklausomus maršruto "lizdus" vienu metu, kiekvienas turi savą įkėlimo/klaidos būseną. Lizdus apibrėžiate naudodami @name aplankus:
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></>;
}
Kiekvienas lizdas naršo ir įkeliamas nepriklausomai — puiku instrumentų lentelėms, kur skydai atnaujinami atskirai, arba rodant dvi sekcijas vienu metu.
Skersti maršrutai leidžia "perimti" naršymą ir jį atvaizduoti dabartiniame kontekste (pvz. modali) vietoj viso puslapio — išlaikant tikrą, bendrinama 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)
Perėmimo žymos ((.) tame pačiame lygyje, (..) vienu aukščiau, (...) šaknyje) kontroliuoja, kuris segmentas perima. Tai tiksliai tai, kaip veikia Instagram stiliaus "nuotrauka atsidaro modaliame lange, bet turi savą URL" šablonas.
Lygiagretūs maršrutai sudaro sudėtingus, nepriklausomai įkeliamus daugiaplokštės išdėstymus (instrumentų lentas) tvarkingai; skersti maršrutai pateikia "modalinis su tikru URL" šabloną (bendrinama, atnaujinimas-saugus, atgal-mygtukas-draugiškas), kuris kitaip yra sunkus sukurti.
Jie yra išplėstiniai, bet išsprendžia tikras UX problemas — nepriklausomus skydu ir kontekstinį perdengimą — kurie anksčiau reikalavo reikšmingų rankų maršrutizavimo/būsenos darbų.