Übersicht

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

• 100% abgeleitete TypeScript-Unterstützung
• Typsichere Navigation
• Verschachteltes Routing 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, gehen Sie zur nächsten Seite. Für eine ausführlichere Erklärung, schnallen Sie sich an, während ich Sie auf den neuesten Stand bringe!

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

Warum sollten Sie also TanStack Router gegenüber einem anderen Router wählen?

Um diese Frage zu beantworten, müssen wir uns die anderen Optionen im Markt ansehen. Es gibt viele, wenn Sie genau hinschauen, aber meiner Erfahrung nach lohnen sich nur wenige, ernsthaft erkundet zu werden

• Next.js - Weithin als De-facto-Framework für den Start eines neuen React-Projekts angesehen, konzentriert es sich stark auf Leistung, Workflow und bahnbrechende Technologie. Seine APIs und Abstraktionen sind leistungsfähig, können aber manchmal als nicht standardmäßig erscheinen. Sein extrem schnelles Wachstum und seine Akzeptanz in der Industrie haben zu einer funktionsreichen Erfahrung geführt, aber auf Kosten des Gefühls, überwältigend und manchmal aufgebläht zu sein.
• Remix / React Router - Ein Full-Stack-Framework, das auf dem historisch erfolgreichen React Router basiert, bietet eine ähnlich leistungsfähige Entwickler- und Benutzererfahrung, mit APIs und Vision, die fest auf Webstandards wie Request/Response basieren und sich darauf konzentrieren, überall dort zu laufen, wo JS laufen kann. Viele seiner APIs und Abstraktionen sind wunderbar gestaltet und waren Inspiration für nicht wenige TanStack Router APIs. Dennoch kann sein starres Design, die nachträglich hinzugefügte Typsicherheit und die manchmal strenge Überachtung von Plattform-APIs einige Entwickler unzufrieden lassen.

Beide Frameworks (und ihre Router) sind großartig, und ich kann persönlich bezeugen, dass beide sehr gute Lösungen für die Entwicklung von React-Anwendungen sind. Meine Erfahrung hat mich auch gelehrt, dass diese Lösungen viel besser sein könnten, insbesondere im Hinblick auf die tatsächlichen Routing-APIs, die Entwicklern zur Verfügung stehen, um ihre Apps schneller, einfacher und angenehmer zu gestalten.

Es ist zu diesem Zeitpunkt wahrscheinlich keine Überraschung, dass die Wahl eines Routers so wichtig ist, dass sie oft 1:1 mit Ihrer Wahl des Frameworks verbunden ist, da die meisten Frameworks auf einem bestimmten Router basieren.

Bedeutet das, dass TanStack Router ein Framework ist?

TanStack Router selbst ist kein "Framework" im herkömmlichen Sinne, da es einige andere gängige Full-Stack-Belange nicht abdeckt. 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 Bündelung, Bereitstellung und serverseitige Funktionalität abdecken. Deshalb entwickeln wir derzeit TanStack Start, ein Full-Stack-Framework, das auf TanStack Router und Vite aufbaut.

Für einen tieferen Einblick in die Geschichte von TanStack Router lesen Sie gerne TanStack Routers Geschichte.

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

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

Und es 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
• Navigations-APIs für Suchparameter
• Unterstützung für benutzerdefinierte Suchparameter-Parser/Serialisierer
• Suchparameter-Middleware
• Geerbter Routen-Kontext
• Gemischtes Datei-basiertes und Code-basiertes Routing

Lassen Sie uns einige der wichtigeren Details genauer betrachten!

Heutzutage wird alles "in TypeScript" geschrieben oder bietet zumindest Typdefinitionen, die über Laufzeitfunktionalitäten gelegt sind, aber viel 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 erkennt, gibt es noch viel mehr zu gewinnen.

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

Was bedeutet das alles für Sie?

• Schnellere Feature-Entwicklung mit Autovervollständigung und Typsuggestionen
• Sicherere und schnellere Refaktorisierungen
• Vertrauen darauf, dass Ihr Code wie erwartet funktioniert

Suchparameter sind oft ein nachträglicher Gedanke, der wie eine Blackbox von Zeichenketten (oder einer Zeichenkette) behandelt wird, die Sie parsen und aktualisieren können, aber nicht viel mehr. Bestehende Lösungen sind **nicht** typsicher, was die Vorsicht erhöht, die für ihren Umgang erforderlich ist. Selbst die "modernsten" Frameworks und Router überlassen es Ihnen, zu entscheiden, wie Sie diesen Zustand verwalten. Manchmal parsen sie die Suchzeichenkette für Sie in ein Objekt, oder manchmal müssen Sie es selbst mit URLSearchParams tun.

Lassen Sie uns zurücktreten und uns daran erinnern, dass **Suchparameter der leistungsfähigste 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 eine Seitenaktualisierung oder das Teilen in sozialen Netzwerken überdauern muss.

Um dieser Verantwortung gerecht zu werden, sind Suchparameter in TanStack Router ein erstklassiger Bürger. Obwohl sie immer noch auf standardmäßigen URLSearchParams basieren, verwendet TanStack Router einen leistungsstarken Parser/Serializer, um tiefere und komplexere Datenstrukturen in Ihren Suchparametern zu verwalten, während sie gleichzeitig 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
• In Loadern, Komponenten und Hooks zugänglich
• Einfach mit den APIs useSearch hook, Link, navigate und router.navigate zu ändern
• Anpassbar mit benutzerdefinierten Suchfiltern und Middleware
• Über feingranulare Suchparameter-Selektoren für effiziente Neuberechnungen abonnierbar

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

Datenladung ist ein kritischer Teil jeder Anwendung, und obwohl die meisten bestehenden Router eine Form von kritischen Datenlade-APIs anbieten, versagen sie oft, wenn es um Zwischenspeicherung und Datenlebenszyklusmanagement geht. Bestehende Lösungen leiden unter einigen häufigen Problemen

• Keine Zwischenspeicherung. Daten sind immer frisch, aber Ihre Benutzer warten darauf, häufig abgerufene Daten immer wieder zu laden.
• Übermäßige Zwischenspeicherung. Daten werden zu lange zwischengespeichert, was zu veralteten Daten und einer schlechten Benutzererfahrung führt.
• Umgängliche Invalidierungsstrategien 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 überhaupt invalidiert werden.

TanStack Router löst diese Probleme mit einem zweigleisigen Ansatz für Zwischenspeicherung und Datenladung

TanStack Router bietet eine leichtgewichtige, integrierte Caching-Schicht, die nahtlos mit dem Router zusammenarbeitet. Diese Caching-Schicht basiert lose auf TanStack Query, jedoch mit weniger Funktionen und einer viel kleineren API-Oberfläche. Wie bei TanStack Query garantieren sinnvolle, aber leistungsstarke Standardeinstellungen, dass Ihre Daten zur Wiederverwendung zwischengespeichert, bei Bedarf invalidiert und bei Nichtgebrauch aus dem Garbage Collector entfernt werden. Sie bietet auch eine einfache API zum manuellen Invalidieren des Caches, wenn nötig.

TanStack Router ist mit einer flexiblen und leistungsstarken Datenlade-API konzipiert, die sich leichter in bestehende Datenabrufbibliotheken wie TanStack Query, SWR, Apollo, Relay oder sogar Ihre eigene benutzerdefinierte Datenabruf-Lösung integrieren lässt. Konfigurierbare APIs wie context, beforeLoad, loaderDeps und loader arbeiten zusammen, um deklarative Datenabhängigkeiten zu definieren, Daten vorab abzurufen und den Lebenszyklus einer externen Datenquelle einfach zu verwalten.

Der Router- und Routenkontext von TanStack Router ist eine leistungsstarke Funktion, die es Ihnen ermöglicht, einen Kontext zu definieren, der für eine bestimmte Route spezifisch ist und dann von allen untergeordneten Routen geerbt wird. Selbst die Router- und Root-Routen selbst können Kontext bereitstellen. Der 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 Vorabladung
• Theming
• Singletons und globale Dienstprogramme
• Currying oder partielle Anwendung über Vorabladungs-, Ladungs- und Rendering-Phasen

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

TanStack Router unterstützt sowohl Datei-basiertes als auch Code-basiertes Routing gleichzeitig. Diese Flexibilität ermöglicht es Ihnen, den Ansatz zu wählen, der am besten zu den Anforderungen Ihres Projekts passt.

Der Datei-basierte Routing-Ansatz von TanStack Router ist einzigartig benutzerorientiert. Die Routenkonfiguration wird entweder vom Vite-Plugin oder der TanStack Router CLI für Sie generiert, wobei die Nutzung dieses generierten Codes Ihnen überlassen bleibt! Das bedeutet, dass Sie immer die volle Kontrolle über Ihre Routen und Ihren Router haben, auch wenn Sie Datei-basiertes 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 erkennen die Investition, das Risiko und die Forschung an, die in ihre Entwicklung geflossen sind, sind aber begeistert, die von ihnen gesetzte Messlatte noch höher zu legen.

Genug Übersicht, es gibt noch viel mehr mit TanStack Router zu tun. Drücken Sie auf die nächste Schaltfläche und legen wir los!