Dateibasiertes Routing

Der Großteil der TanStack Router-Dokumentation ist für file-basierte Routen geschrieben und soll Ihnen helfen, im Detail zu verstehen, wie file-basierte Routen konfiguriert werden und welche technischen Details dahinterstecken. Obwohl file-basierte Routen die bevorzugte und empfohlene Methode zur Konfiguration von TanStack Router sind, können Sie auch Code-basierte Routen verwenden, wenn Sie dies bevorzugen.

File-basierte Routen sind eine Methode, um Ihre Routen über das Dateisystem zu konfigurieren. Anstatt Ihre Routenstruktur per Code zu definieren, können Sie Ihre Routen mithilfe einer Reihe von Dateien und Verzeichnissen definieren, die die Routenhierarchie Ihrer Anwendung darstellen. Dies bietet eine Reihe von Vorteilen:

• Einfachheit: File-basierte Routen sind visuell intuitiv und für neue sowie erfahrene Entwickler leicht verständlich.
• Organisation: Routen werden so organisiert, dass sie der URL-Struktur Ihrer Anwendung entsprechen.
• Skalierbarkeit: Mit wachsender Anwendung vereinfachen file-basierte Routen das Hinzufügen neuer Routen und die Pflege bestehender Routen.
• Code-Splitting: File-basierte Routen ermöglichen es TanStack Router, Ihre Routen automatisch für bessere Leistung zu splitten.
• Typsicherheit: File-basierte Routen erhöhen die Typsicherheit, indem sie Typverknüpfungen für Ihre Routen generieren und verwalten, was bei Code-basierten Routen sonst ein mühsamer Prozess wäre.
• Konsistenz: File-basierte Routen erzwingen eine konsistente Struktur für Ihre Routen, was die Wartung und Aktualisierung Ihrer Anwendung sowie den Wechsel von einem Projekt zum anderen erleichtert.

Während Verzeichnisse schon lange zur Darstellung der Routenhierarchie verwendet werden, führen file-basierte Routen ein zusätzliches Konzept ein: die Verwendung des Zeichens . im Dateinamen, 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 zur Darstellung der Routenhierarchie verwendet werden, was nützlich sein kann, um mehrere Routen in logische Gruppen zu organisieren und auch die Dateinamenlänge für große Gruppen von tief verschachtelten Routen zu reduzieren.

Siehe das folgende Beispiel

Flat routing ermöglicht es Ihnen, .s zu verwenden, um Verschachtelungsebenen von Routen zu bezeichnen.

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 Flat-Routenstruktur nicht die beste Wahl für Ihr Projekt ist. Deshalb erlaubt TanStack Router Ihnen, sowohl Flat- als auch Verzeichnis-Routen zu mischen, um einen Routenbaum zu erstellen, der die Vorteile beider Welten nutzt, wo es sinnvoll ist.

Siehe das folgende Beispiel

Sowohl Flat- als auch Verzeichnis-Routen können gemischt werden, um einen Routenbaum zu erstellen, der die Vorteile beider Welten nutzt, wo es sinnvoll ist.

Um mit file-basierten Routen zu beginnen, müssen Sie den Bundler Ihres Projekts so konfigurieren, dass er das TanStack Router Plugin oder die TanStack Router CLI verwendet.

Um file-basierte Routen zu aktivieren, müssen Sie React mit einem unterstützten Bundler verwenden. Prüfen Sie, ob Ihr Bundler in den untenstehenden Konfigurationsleitfäden aufgeführt ist.

• Installation mit Vite
• Installation mit Rspack/Rsbuild
• Installation mit Webpack
• Installation mit Esbuild

Wenn Sie TanStack Router's file-basierte Routen über einen der unterstützten Bundler verwenden, wird unser Plugin automatisch Ihre Routenkonfiguration während der Entwicklungs- und Build-Prozesse Ihres Bundlers generieren. 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 fürchten Sie sich nicht! Sie können immer noch das Paket @tanstack/router-cli verwenden, um Ihre Routenbaumdatei zu generieren.