Routengruppen

Im app-Verzeichnis werden verschachtelte Ordner normalerweise auf URL-Pfade abgebildet. Sie können jedoch einen Ordner als Routengruppe markieren, um zu verhindern, dass der Ordner in den URL-Pfad der Route aufgenommen wird.

Dies ermöglicht es Ihnen, Ihre Routensegmente und Projektdateien in logische Gruppen zu organisieren, ohne die URL-Pfadstruktur zu beeinflussen.

Routengruppen sind nützlich für:

Organisieren von Routen in Gruppen, z.B. nach Websitebereich, Absicht oder Team.
Aktivieren von verschachtelten Layouts auf derselben Routensegmentebene:
- Erstellen mehrerer verschachtelter Layouts im selben Segment, einschließlich mehrerer Root-Layouts
- Hinzufügen eines Layouts zu einer Teilmenge von Routen in einem gemeinsamen Segment
Hinzufügen eines Ladevorgang-Skeletts zu einer bestimmten Route in einem gemeinsamen Segment

Konvention

Eine Routengruppe kann erstellt werden, indem Sie den Ordnernamen in Klammern einschließen: (ordnername)

Beispiele

Routen organisieren ohne URL-Pfad zu beeinflussen

Um Routen zu organisieren, ohne den URL-Pfad zu beeinflussen, erstellen Sie eine Gruppe, um zusammengehörige Routen zusammenzuhalten. Die Ordner in Klammern werden aus der URL ausgelassen (z.B. (marketing) oder (shop).

Obwohl Routen in (marketing) und (shop) die gleiche URL-Hierarchie teilen, können Sie für jede Gruppe ein anderes Layout erstellen, indem Sie eine layout.js-Datei in ihren Ordnern hinzufügen.

Bestimmte Segmente in ein Layout aufnehmen

Um bestimmte Routen in ein Layout aufzunehmen, erstellen Sie eine neue Routengruppe (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).

Ladevorgang-Skeletts für eine bestimmte Route

Um ein Ladevorgang-Skelett über eine loading.js-Datei auf eine bestimmte Route anzuwenden, erstellen Sie eine neue Routengruppe (z.B. /(overview)) und verschieben Sie Ihre loading.tsx in diese Routengruppe.

Ordnerstruktur mit loading.tsx und page.tsx in der Routengruppe

Nun gilt die loading.tsx-Datei nur für Ihre Dashboard → Overview-Seite und nicht für alle Ihre Dashboard-Seiten, ohne die URL-Pfadstruktur zu beeinflussen.

Erstellen mehrerer Root-Layouts

Um mehrere Root-Layouts zu erstellen, entfernen Sie die übergeordnete layout.js-Datei und fügen Sie eine layout.js-Datei in jeder Routengruppe hinzu. Dies ist nützlich, um eine Anwendung in Abschnitte zu unterteilen, die eine völlig unterschiedliche Benutzeroberfläche oder Erfahrung haben. Die <html>- und <body>-Tags müssen jedem Root-Layout hinzugefügt werden.

Im obigen Beispiel haben sowohl (marketing) als auch (shop) ihr eigenes Root-Layout.

Hinweis:

Die Benennung von Routengruppen hat keine besondere Bedeutung außer für die Organisation. Sie beeinflussen nicht den URL-Pfad.

Routen, die eine Routengruppe enthalten, sollten nicht zu demselben URL-Pfad wie andere Routen führen. Da Routengruppen die URL-Struktur nicht beeinflussen, würden (marketing)/about/page.js und (shop)/about/page.js beide zu /about führen und einen Fehler verursachen.

Wenn Sie mehrere Root-Layouts ohne eine übergeordnete layout.js-Datei verwenden, sollte Ihre Home-page.js-Datei in einer der Routengruppen definiert werden, z.B.: app/(marketing)/page.js.

Die Navigation zwischen mehreren Root-Layouts führt zu einem vollständigen Seitenaufbau (im Gegensatz zur Client-seitigen Navigation). Zum Beispiel führt die Navigation von /cart, der app/(shop)/layout.js verwendet, zu /blog, der app/(marketing)/layout.js verwendet, zu einem vollständigen Seitenaufbau. Dies gilt nur für mehrere Root-Layouts.