Interceptierende Routen (Intercepting Routes)

Interceptierende Routen ermöglichen es Ihnen, eine Route aus einem anderen Teil Ihrer Anwendung innerhalb des aktuellen Layouts zu laden. Dieses Routing-Paradigma ist nützlich, wenn Sie den Inhalt einer Route anzeigen möchten, ohne dass der Benutzer in einen anderen Kontext wechselt.

Zum Beispiel können Sie beim Klicken auf ein Foto in einem Feed das Foto in einem Modal anzeigen, das den Feed überlagert. In diesem Fall fängt Next.js die Route /photo/123 ab, maskiert die URL und überlagert sie über /feed.

Wenn jedoch durch einen klickbaren Share-Link oder durch Aktualisieren der Seite auf das Foto navigiert wird, sollte die gesamte Fotoseite anstelle des Modals gerendert werden. In diesem Fall findet keine Routen-Interception statt.

Konvention

Interceptierende Routen können mit der (..)-Konvention definiert werden, die der relativen Pfadkonvention ../ ähnelt, aber für Segmente gilt.

Sie können verwenden:

• (.) um Segmente auf gleicher Ebene abzugleichen
• (..) um Segmente eine Ebene höher abzugleichen
• (..)(..) um Segmente zwei Ebenen höher abzugleichen
• (...) um Segmente aus dem Root-Verzeichnis app abzugleichen

Zum Beispiel können Sie das photo-Segment aus dem feed-Segment abfangen, indem Sie ein (..)photo-Verzeichnis erstellen.

Hinweis: Die (..)-Konvention basiert auf Route-Segmenten, nicht auf dem Dateisystem.

Beispiele

Modals

Interceptierende Routen können zusammen mit Parallelen Routen verwendet werden, um Modals zu erstellen.

Die Verwendung dieses Musters zur Erstellung von Modals überwindet einige häufige Herausforderungen bei der Arbeit mit Modals, indem es Ihnen ermöglicht:

• Den Modal-Inhalt durch eine URL teilbar zu machen
• Den Kontext bei Seitenaktualisierung zu erhalten, anstatt das Modal zu schließen
• Das Modal bei Rückwärtsnavigation zu schließen, anstatt zur vorherigen Route zu gehen
• Das Modal bei Vorwärtsnavigation erneut zu öffnen

Im obigen Beispiel kann der Pfad zum photo-Segment den (..)-Matcher verwenden, da @modal ein Slot und kein Segment ist. Dies bedeutet, dass die photo-Route nur eine Segment-Ebene höher liegt, obwohl sie zwei Dateisystem-Ebenen höher ist.

Weitere Beispiele könnten das Öffnen eines Login-Modals in einer Top-Navbar sein, während auch eine dedizierte /login-Seite existiert, oder das Öffnen eines Warenkorbs in einem Seiten-Modal.

Sehen Sie sich ein Beispiel für Modals mit interceptierenden und parallelen Routen an.