Intercepting Routes (Abfangende Routen)

Intercepting Routes (Abfangende 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 wechseln muss.

Beispielsweise 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 Link oder durch Aktualisieren der Seite auf das Foto zugegriffen wird, sollte die gesamte Fotoseite anstelle des Modals gerendert werden. In diesem Fall sollte keine Route abgefangen werden.

Konvention

Abfangende 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 derselben Ebene abzugleichen
• (..) um Segmente eine Ebene höher abzugleichen
• (..)(..) um Segmente zwei Ebenen höher abzugleichen
• (...) um Segmente vom Root-Verzeichnis app abzugleichen

Beispielsweise 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

Intercepting Routes (Abfangende Routen) können zusammen mit Parallel Routes (Parallelen Routen) verwendet werden, um Modals zu erstellen. Dies ermöglicht es Ihnen, häufige Herausforderungen beim Erstellen von Modals zu lösen, wie z.B.:

• Teilbaren Inhalt des Modals über eine URL.
• Erhalt des Kontexts bei Aktualisierung der Seite, anstatt das Modal zu schließen.
• Schließen des Modals bei Rückwärtsnavigation anstatt zur vorherigen Route zu navigieren.
• Wiederöffnen des Modals bei Vorwärtsnavigation.

Betrachten Sie das folgende UI-Muster, bei dem ein Benutzer ein Foto-Modal aus einer Galerie über Client-seitige Navigation öffnen oder direkt über eine teilbare URL zur Fotoseite navigieren kann:

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 Segmentebene höher liegt, obwohl sie zwei Dateisystemebenen höher ist.

Siehe die Dokumentation zu Parallel Routes (Parallele Routen) für ein schrittweises Beispiel oder unser Beispiel für eine Bildergalerie.

Gut zu wissen:

• 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.