Wat zijn parallelle en onderscheppende routes?

Question

Accepted Answer

Dit zijn twee geavanceerde App Router-functies voor geavanceerde UI-indelingen. Ze delen een folder-conventiesyntaxis. ## Waarom het belangrijk is Parallelle routes maken het mogelijk om complexe, onafhankelijk ladende lay-outs met meerdere vensters (dashboards) schoon in te richten; onderscheppende routes leveren het "modal met een echte URL"-patroon (deelbaar, vernieuwingsveilig, terug-knop-vriendelijk) dat anders moeilijk te bouwen is. Ze zijn geavanceerd, maar ze lossen echte UX-problemen op — onafhankelijke panelen en contextuele overlays — die voorheen aanzienlijke handmatige routing/state-werk vereisten. ## Parallelle routes (@folder) — render meerdere pagina's in één layout Parallelle routes stellen een enkele layout in staat om **meerdere onafhankelijke route "slots" tegelijkertijd weer te geven**, elk met zijn eigen laad-/foutstatus. U definieert slots met `@name`-mappen: ```text app/ layout.tsx @team/page.tsx → a slot @analytics/page.tsx → another slot ``` ```tsx // 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 <>

{children} ; } ``` Elke slot navigeert en laadt **onafhankelijk** — geweldig voor **dashboards** waar panelen afzonderlijk worden bijgewerkt, of waar twee secties tegelijk worden weergegeven. ## Onderscheppende routes ((.)folder) — overlay een route zonder de huidige pagina te verlaten Onderscheppende routes stellen u in staat om een navigatie "op te vangen" en deze **in de huidige context** weer te geven (bijv. een modal) in plaats van een volledige pagina — terwijl u nog steeds een echte, deelbare URL hebt. ```text 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) ``` ```text 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) ``` De onderscheppingsmarkeringen (`(.)` zelfde niveau, `(..)` één omhoog, `(...)` root) bepalen welk segment wordt onderschept. Dit is precies hoe het Instagram-achtige "foto opent in een modal maar heeft zijn eigen URL"-patroon werkt.