javascript / expert
Snippet
Fortgeschrittene parallele und abfangende Routen für kontextsensitive Modale
Parallele und abfangende Routen in Next.js ermöglichen es, ein Modal zu rendern, während der aktuelle Seitenkontext im Hintergrund erhalten bleibt. Die (.)-Notation fängt die Navigation auf derselben Ebene ab und ermöglicht so ein 'Master-Detail'-Muster, ohne den Listenstatus zu verlieren.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app/layout.tsxexport default function RootLayout({ children, modal }: { children: React.ReactNode, modal: React.ReactNode }) {return (<html><body>{children}{modal}</body></html>);}// app/@modal/(.)photos/[id]/page.tsxexport default function PhotoModal({ params }: { params: { id: string } }) {return <ModalWrapper>Photo ID: {params.id}</ModalWrapper>;}
nextjs
Erklärung
1
{ children, modal }
Deklariert einen Layout-Slot, der das parallele Rendering der 'modal'-Route neben den 'children' ermöglicht.
2
(.)photos/[id]
Das (.)-Präfix fängt die interne Navigation zur Photo-Route ab, während der Hintergrundkontext erhalten bleibt.