Route Groups
Im app-Verzeichnis werden verschachtelte Ordner normalerweise auf URL-Pfade abgebildet. Sie können jedoch einen Ordner als Route Group markieren, um zu verhindern, dass der Ordner in den URL-Pfad der Route aufgenommen wird.
Dadurch können Sie Ihre Routensegmente und Projektdateien in logische Gruppen einteilen, ohne die URL-Pfadstruktur zu beeinflussen.
Route Groups sind nützlich für:
- Organisation von Routen in Gruppen, z.B. nach Website-Bereich, Zweck oder Team.
- Ermöglichen von verschachtelten Layouts auf demselben Routensegment-Level:
Konvention
Eine Route Group wird erstellt, indem ein Ordnername in Klammern gesetzt wird: (folderName)
Beispiele
Routen organisieren ohne URL-Pfad zu beeinflussen
Um Routen zu organisieren, ohne die URL zu beeinflussen, erstellen Sie eine Gruppe, um verwandte Routen zusammenzuhalten. Die Ordner in Klammern werden aus der URL ausgelassen (z.B. (marketing) oder (shop)).
Obwohl die Routen innerhalb von (marketing) und (shop) dieselbe URL-Hierarchie teilen, können Sie für jede Gruppe ein unterschiedliches Layout erstellen, indem Sie eine layout.js-Datei in ihren Ordnern hinzufügen.
Bestimmte Segmente für ein Layout auswählen
Um bestimmte Routen für ein Layout auszuwählen, erstellen Sie eine neue Route Group (z.B. (shop)) und verschieben Sie die Routen, die dasselbe Layout teilen, in die Gruppe (z.B. account und cart). Die Routen außerhalb der Gruppe teilen das Layout nicht (z.B. checkout).
Mehrere Root-Layouts erstellen
Um mehrere Root-Layouts zu erstellen, entfernen Sie die layout.js-Datei auf oberster Ebene und fügen Sie eine layout.js-Datei in jeder Route Group hinzu. Dies ist nützlich, um eine Anwendung in Abschnitte mit komplett unterschiedlichen UIs oder Benutzererlebnissen aufzuteilen. Die <html>- und <body>-Tags müssen in jedem Root-Layout hinzugefügt werden.
Im obigen Beispiel haben sowohl (marketing) als auch (shop) ihr eigenes Root-Layout.
Wissenswert:
- Die Benennung von Route Groups hat keine besondere Bedeutung außer der Organisation. Sie beeinflusst nicht den URL-Pfad.
- Routen, die eine Route Group enthalten, sollten nicht auf denselben URL-Pfad aufgelöst werden wie andere Routen. Beispielsweise würden
(marketing)/about/page.jsund(shop)/about/page.jsbeide auf/aboutaufgelöst werden und einen Fehler verursachen.- Wenn Sie mehrere Root-Layouts ohne eine
layout.js-Datei auf oberster Ebene verwenden, sollte Ihre Home-page.js-Datei in einer der Route Groups definiert sein, z.B.:app/(marketing)/page.js.- Die Navigation zwischen mehreren Root-Layouts verursacht einen vollständigen Seitenneuladevorgang (im Gegensatz zu einer clientseitigen Navigation). Beispielsweise verursacht die Navigation von
/cart, dasapp/(shop)/layout.jsverwendet, zu/blog, dasapp/(marketing)/layout.jsverwendet, einen vollständigen Seitenneuladevorgang. Dies gilt nur für mehrere Root-Layouts.