javascript / intermediate
Snippet
Routen-Interzeption für kontextbezogene Modale
Das Abfangen von Routen ermöglicht es, eine Route aus einem anderen Teil der Anwendung innerhalb des aktuellen Layouts zu laden. Dies wird häufig für Modale verwendet, bei denen der Kontext der Hintergrundseite erhalten bleiben soll, während das Modal eine eigene, teilbare URL erhält.
snippet.js
1
2
3
4
5
// app/feed/@modal/(..)photos/[id]/page.tsxexport default async function PhotoModal({ params }: { params: { id: string } }) {const photo = await getPhoto(params.id);return <Modal><PhotoView photo={photo} /></Modal>;}
nextjs
Erklärung
1
app/feed/@modal/(..)photos/[id]/page.tsx
Die (..)-Syntax fängt die /photos-Route auf derselben Ebene wie das Feed-Verzeichnis ab.
2
export default async function PhotoModal
Eine Standard-Server-Komponente, die Daten für die spezifische ID abruft.
3
<Modal><PhotoView photo={photo} /></Modal>
Rendert den Inhalt in einem Modal-Wrapper, während die Hintergrundseite sichtbar bleibt.