Dateibasiertes Routing

Der Großteil der TanStack Router-Dokumentation ist für dateibasierte Routenführung geschrieben und soll Ihnen helfen, detaillierter zu verstehen, wie dateibasierte Routenführung konfiguriert wird und welche technischen Details dahinterstecken. Obwohl dateibasierte Routenführung die bevorzugte und empfohlene Methode zur Konfiguration von TanStack Router ist, können Sie auch codebasierte Routenführung verwenden, wenn Sie dies bevorzugen.

Dateibasierte Routenführung ist eine Methode zur Konfiguration Ihrer Routen mithilfe des Dateisystems. Anstatt Ihre Routenstruktur per Code zu definieren, können Sie Ihre Routen über eine Reihe von Dateien und Verzeichnissen definieren, die die Routenhierarchie Ihrer Anwendung darstellen. Dies bringt eine Reihe von Vorteilen mit sich

• Einfachheit: Die dateibasierte Routenführung ist visuell intuitiv und sowohl für neue als auch für erfahrene Entwickler leicht verständlich.
• Organisation: Routen werden so organisiert, dass sie die URL-Struktur Ihrer Anwendung widerspiegeln.
• Skalierbarkeit: Mit wachsender Anwendung erleichtert die dateibasierte Routenführung das Hinzufügen neuer Routen und die Wartung bestehender.
• Code-Splitting: Die dateibasierte Routenführung ermöglicht es TanStack Router, Ihre Routen für eine bessere Leistung automatisch aufzuteilen.
• Typsicherheit: Die dateibasierte Routenführung erhöht die Typsicherheit, indem sie Typverknüpfungen für Ihre Routen generiert und verwaltet, was über codebasierte Routenführung sonst ein mühsamer Prozess sein kann.
• Konsistenz: Die dateibasierte Routenführung erzwingt eine konsistente Struktur für Ihre Routen, was die Wartung und Aktualisierung Ihrer Anwendung sowie den Wechsel zwischen Projekten erleichtert.

Während Verzeichnisse lange Zeit zur Darstellung der Routenhierarchie verwendet wurden, führt die dateibasierte Routenführung ein zusätzliches Konzept ein, bei dem das Zeichen . im Dateinamen verwendet wird, um eine Routenverschachtelung zu kennzeichnen. Dies ermöglicht es Ihnen, die Erstellung von Verzeichnissen für wenige tief verschachtelte Routen zu vermeiden und weiterhin Verzeichnisse für breitere Routenhierarchien zu verwenden. Schauen wir uns einige Beispiele an!

Verzeichnisse können verwendet werden, um die Routenhierarchie darzustellen, was nützlich sein kann, um mehrere Routen in logische Gruppen zu organisieren und auch die Länge der Dateinamen für große Gruppen tief verschachtelter Routen zu verkürzen.

Siehe das folgende Beispiel

Die flache Routenführung gibt Ihnen die Möglichkeit, .s zu verwenden, um Verschachtelungsebenen von Routen zu kennzeichnen.

Dies kann nützlich sein, wenn Sie eine große Anzahl von eindeutig tief verschachtelten Routen haben und die Erstellung von Verzeichnissen für jede einzelne vermeiden möchten.

Siehe das folgende Beispiel

Es ist äußerst wahrscheinlich, dass eine 100%ige Verzeichnis- oder flache Routenstruktur nicht die beste Lösung für Ihr Projekt ist. Deshalb erlaubt Ihnen TanStack Router, sowohl flache als auch Verzeichnisrouten zu mischen, um einen Routenbaum zu erstellen, der das Beste aus beiden Welten nutzt, wo es sinnvoll ist.

Siehe das folgende Beispiel

Sowohl flache als auch Verzeichnisrouten können gemischt werden, um einen Routenbaum zu erstellen, der das Beste aus beiden Welten nutzt, wo es sinnvoll ist.

Um mit der dateibasierten Routenführung zu beginnen, müssen Sie den Bundler Ihres Projekts so konfigurieren, dass er das TanStack Router Plugin oder die TanStack Router CLI verwendet.

Um dateibasierte Routenführung zu aktivieren, müssen Sie React mit einem unterstützten Bundler verwenden. Prüfen Sie, ob Ihr Bundler in den folgenden Konfigurationsleitfäden aufgeführt ist.

• Konfiguration mit Vite

Wenn Sie die dateibasierte Routenführung von TanStack Router über einen der unterstützten Bundler verwenden, **generiert unser Plugin Ihre Routenkonfiguration automatisch während der Entwicklungs- und Build-Prozesse Ihres Bundlers**. Dies ist der einfachste Weg, die Routengenerierungsfunktionen von TanStack Router zu nutzen.

Wenn Ihr Bundler noch nicht unterstützt wird, können Sie uns auf Discord oder GitHub kontaktieren, um uns Bescheid zu geben. Bis dahin keine Sorge! Sie können immer noch das Paket @tanstack/router-cli verwenden, um Ihre Routenbaumdatei zu generieren.