Interceptierende Routen

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

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 Klicken auf einen teilbaren Link oder durch Aktualisieren der Seite direkt zum Foto navigiert wird, sollte die gesamte Fotoseite anstelle des Modals gerendert werden. In diesem Fall sollte keine Route-Interception stattfinden.

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 derselben 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. 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 bereitzustellen.
• Kontext beizubehalten, wenn die Seite aktualisiert wird, anstatt das Modal zu schließen.
• Das Modal bei Rückwärtsnavigation zu schließen, anstatt zur vorherigen Route zu navigieren.
• Das Modal bei Vorwärtsnavigation wieder zu öffnen.

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

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

Weitere Informationen finden Sie in der Dokumentation zu Parallelen Routen für ein schrittweises Beispiel oder sehen Sie sich unser Beispiel für eine Bildergalerie an.

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.