Übersicht

TanStack Router ist ein Router zum Erstellen von React- und Solid-Anwendungen. Einige seiner Funktionen sind:

• 100% abgeleitete TypeScript-Unterstützung
• Typsichere Navigation
• Verschachtelte Routen und Layout-Routen (mit pfadlosen Layouts)
• Integrierte Routen-Loader mit SWR-Caching
• Entwickelt für Client-seitige Daten-Caches (TanStack Query, SWR, etc.)
• Automatische Routen-Vorabladung
• Asynchrone Routen-Elemente und Fehlergrenzen
• Datei-basierte Routengenerierung
• Typsichere JSON-first Search Params State Management APIs
• Schema-Validierung für Pfade und Suchparameter
• Suchparameter-Navigations-APIs
• Unterstützung für benutzerdefinierte Suchparameter-Parser/Serialisierer
• Suchparameter-Middleware
• Middleware für Routenabgleich/-ladung

Um schnell loszulegen, gehe zur nächsten Seite. Für eine ausführlichere Erklärung, schnall dich an, während ich dich auf den neuesten Stand bringe!

Die Verwendung eines Routers zum Erstellen von Anwendungen wird allgemein als unverzichtbar angesehen und ist normalerweise eine der ersten Entscheidungen, die Sie bei Ihrem Technologie-Stack treffen.

Bedeutet das, dass TanStack Router ein Framework ist?

TanStack Router selbst ist kein "Framework" im herkömmlichen Sinne, da es sich nicht um einige andere gängige Full-Stack-Aspekte kümmert. TanStack Router wurde jedoch so konzipiert, dass er zu einem Full-Stack-Framework aufgerüstet werden kann, wenn er in Verbindung mit anderen Tools verwendet wird, die sich mit Bundling, Deployments und serverseitigen Funktionalitäten befassen. Deshalb entwickeln wir derzeit TanStack Start, ein Full-Stack-Framework, das auf TanStack Router und Vite aufbaut.

Für eine tiefere Betrachtung der Geschichte von TanStack Router lesen Sie gerne Die Geschichte von TanStack Router.

TanStack Router erfüllt die gleichen grundlegenden Erwartungen wie andere Router, die Sie von ihnen gewohnt sind

• Verschachtelte Routen, Layout-Routen, gruppierte Routen
• Datei-basierte Routenführung
• Paralleles Datenladen
• Prefetching
• URL-Pfadparameter
• Fehlergrenzen und -behandlung
• SSR
• Routenmaskierung

Und er bietet auch einige neue Funktionen, die die Messlatte höher legen

• 100% abgeleitete TypeScript-Unterstützung
• Typsichere Navigation
• Integrierte SWR-Zwischenspeicherung für Loader
• Entwickelt für Client-seitige Daten-Caches (TanStack Query, SWR, etc.)
• Typsichere JSON-first Search Params State Management APIs
• Schema-Validierung für Pfade und Suchparameter
• APIs für die Navigation über Suchparameter
• Unterstützung für benutzerdefinierte Suchparameter-Parser/Serialisierer
• Suchparameter-Middleware
• Vererbter Routenkontext
• Gemischte dateibasierte und codebasierte Routen

Tauchen wir im Detail in einige der wichtigeren ein!

Alles wird heutzutage „in TypeScript“ geschrieben oder bietet zumindest Typdefinitionen, die über Laufzeitfunktionalitäten gelegt sind, aber zu wenige Pakete im Ökosystem entwerfen ihre APIs tatsächlich mit TypeScript im Hinterkopf. Während ich mich also freue, dass Ihr Router Ihre Optionsfelder automatisch vervollständigt und ein paar Tippfehler bei Eigenschaften/Methoden hier und da abfängt, gibt es noch viel mehr zu erreichen.

• TanStack Router ist sich jederzeit und an jedem Punkt Ihres Codes aller Ihrer Routen und deren Konfiguration bewusst. Dazu gehören der Pfad, Pfadparameter, Suchparameter, Kontext und jede andere von Ihnen bereitgestellte Konfiguration. Letztendlich bedeutet dies, dass Sie zu jeder Route in Ihrer App mit 100 % Typsicherheit navigieren können und sicher sein können, dass Ihr Link- oder Navigationsaufruf erfolgreich sein wird.
• TanStack Router bietet verlustfreie Typ-Inferenz. Er verwendet unzählige generische Typparameter, um alle Typinformationen, die Sie ihm geben, zu erzwingen und durch den Rest seiner API und letztendlich Ihre App zu propagieren. Kein anderer Router bietet dieses Maß an Typsicherheit und Entwicklervertrauen.

Was bedeutet das alles für Sie?

• Schnellere Feature-Entwicklung mit Autovervollständigung und Typ-Hints
• Sicherere und schnellere Refactorings
• Vertrauen, dass Ihr Code wie erwartet funktioniert

Suchparameter werden oft im Nachhinein behandelt, als eine Blackbox aus Zeichenketten (oder einer Zeichenkette), die Sie parsen und aktualisieren können, aber nicht viel mehr. Bestehende Lösungen sind ebenfalls nicht typsicher, was die Vorsicht erhöht, die erforderlich ist, um mit ihnen umzugehen. Selbst die "modernsten" Frameworks und Router überlassen es Ihnen, zu entscheiden, wie Sie diesen Zustand verwalten. Manchmal parsen sie die Suchzeichenfolge in ein Objekt für Sie, oder manchmal müssen Sie es selbst mit URLSearchParams tun.

Treten wir einen Schritt zurück und erinnern uns daran, dass Suchparameter der leistungsstärkste Zustandsmanager in Ihrer gesamten Anwendung sind. Sie sind global, serialisierbar, Lesezeichen-fähig und teilbar, was sie zum perfekten Ort macht, um jeden Zustand zu speichern, der einen Seitenrefresh oder ein Social-Share überdauern muss.

Um dieser Verantwortung gerecht zu werden, sind Suchparameter ein Bürger erster Klasse in TanStack Router. Obwohl immer noch auf Standard-URLSearchParams basierend, verwendet TanStack Router einen leistungsstarken Parser/Serializer, um tiefere und komplexere Datenstrukturen in Ihren Suchparametern zu verwalten, und das alles, während sie typsicher und einfach zu handhaben bleiben.

Es ist, als hätte man useState direkt in der URL!

Suchparameter sind

• Automatisch als JSON geparst und serialisiert
• Validiert und typisiert
• Von übergeordneten Routen geerbt
• Zugänglich in Loadern, Komponenten und Hooks
• Einfach zu ändern mit den APIs useSearch hook, Link, navigate und router.navigate
• Anpassbar mit benutzerdefinierten Suchfiltern und Middleware
• Über fein granulare Suchparameter-Selektoren abonniert für effiziente Neurender

Sobald Sie mit den Suchparametern von TanStack Router beginnen, werden Sie sich fragen, wie Sie jemals ohne sie leben konnten.

Datenladen ist ein kritischer Teil jeder Anwendung und obwohl die meisten bestehenden Router irgendeine Form von kritischen Datenlade-APIs anbieten, fallen sie oft bei der Zwischenspeicherung und der Verwaltung des Datenlebenszyklus zu kurz. Bestehende Lösungen leiden unter einigen häufigen Problemen

• Keine Zwischenspeicherung. Daten sind immer frisch, aber Ihre Benutzer warten darauf, dass häufig aufgerufene Daten immer wieder geladen werden.
• Übermäßig aggressive Zwischenspeicherung. Daten werden zu lange zwischengespeichert, was zu veralteten Daten und einer schlechten Benutzererfahrung führt.
• Umgängliche Invalidation-Strategien und APIs. Daten können zu oft invalidiert werden, was zu unnötigen Netzwerkanfragen und verschwendeten Ressourcen führt, oder Sie haben keine feingranulare Kontrolle darüber, wann Daten invalidiert werden.

TanStack Router löst diese Probleme mit einem zweistufigen Ansatz für Zwischenspeicherung und Datenladen

TanStack Router bietet eine leichtgewichtige integrierte Zwischenspeicherungsschicht, die nahtlos mit dem Router funktioniert. Diese Zwischenspeicherungsschicht basiert lose auf TanStack Query, jedoch mit weniger Funktionen und einer deutlich kleineren API-Oberfläche. Wie TanStack Query garantieren sinnvolle, aber leistungsstarke Standardeinstellungen, dass Ihre Daten für die Wiederverwendung zwischengespeichert, bei Bedarf invalidiert und bei Nichtgebrauch gesammelt werden. Sie bietet auch eine einfache API zur manuellen Invalidierung des Caches bei Bedarf.

TanStack Router ist mit einer flexiblen und leistungsstarken Datenlade-API ausgestattet, die sich leichter in bestehende Datenabrufbibliotheken wie TanStack Query, SWR, Apollo, Relay oder sogar Ihre eigene benutzerdefinierte Datenabruflösung integrieren lässt. Konfigurierbare APIs wie context, beforeLoad, loaderDeps und loader arbeiten zusammen, um die Deklaration von Datenabhängigkeiten, das Vorabrufen von Daten und die einfache Verwaltung des Lebenszyklus einer externen Datenquelle zu erleichtern.

Der Router- und Routenkontext von TanStack Router ist ein leistungsstarkes Feature, das es Ihnen ermöglicht, Routen-spezifischen Kontext zu definieren, der dann von allen untergeordneten Routen vererbt wird. Sogar die Router- und Root-Routen selbst können Kontext bereitstellen. Kontext kann sowohl synchron als auch asynchron aufgebaut werden und verwendet werden, um Daten, Konfigurationen oder sogar Funktionen zwischen Routen und Routenkonfigurationen auszutauschen. Dies ist besonders nützlich für Szenarien wie

• Authentifizierung und Autorisierung
• Hybrides SSR/CSR-Datenabruf und Vorabladen
• Theming
• Singletons und globale Dienstprogramme
• Curried oder partielle Anwendung über die Stufen Vorabladen, Laden und Rendern

Außerdem, was wäre Routenkontext, wenn er nicht typsicher wäre? Der Routenkontext von TanStack Router ist vollständig typsicher und wird ohne zusätzliche Kosten für Sie inferiert.

TanStack Router unterstützt gleichzeitig dateibasierte und codebasierte Routen. Diese Flexibilität ermöglicht es Ihnen, den Ansatz zu wählen, der am besten zu den Anforderungen Ihres Projekts passt.

Der dateibasierte Routing-Ansatz von TanStack Router ist einzigartig benutzerorientiert. Die Routenkonfiguration wird entweder vom Vite-Plugin oder der TanStack Router CLI für Sie generiert, und die Verwendung dieses generierten Codes liegt bei Ihnen! Das bedeutet, dass Sie die volle Kontrolle über Ihre Routen und Ihren Router haben, auch wenn Sie dateibasiertes Routing verwenden.

TanStack Router baut auf Konzepten und Mustern auf, die von vielen anderen OSS-Projekten popularisiert wurden, darunter

• TRPC
• Remix
• Chicane
• Next.js

Wir anerkennen die Investition, das Risiko und die Forschung, die in ihre Entwicklung geflossen sind, und sind begeistert, die von ihnen gesetzte Messlatte noch höher zu legen.

Genug Überblick, es gibt noch so viel mehr mit TanStack Router zu tun. Drücken Sie auf Weiter und legen wir los!