Video: Einführung in TanStack Router

Pünktlich zu Weihnachten 2023 ist die 1.0-Version vom TanStack Router veröffentlicht worden. Damit gibt es nun eine Alternative zum bisherigen Platzhirschen, dem React Router.

Ähnlich wie beim React Router erlaubt es auch der TanStack Router, das DataFetching mit den Routen zu verbinden. Außerdem unterstützt der Router moderne React Features wie Suspense.

Aus meiner Sicht hat der Router darüberhinaus aber zwei wirkliche Alleinstellungsmerkmale. Zum einen sind alle Routen automatisch typsicher. Das bedeutet, wenn ich zum Beispiel einen Link mit der Link-Komponente des Routers rendere, prüft TypeScript, ob es die Route überhaupt gibt. Und falls nicht, gibt es einen Fehler. Dabei wird dann auch überprüft, ob ich alle notwendigen Pfad-Variablen übergeben habe, sofern meine Route solche definiert hat (zum Beispiel /home/user/:userId). Das ist ein wirklich tolles Feature!

Außerdem macht der TanStack Router das Arbeiten mit Search-Parametern in einer URL (?order_by=date&direction=desc) sehr einfach und effizient. Die Search-Parameter, die eine Route entgegennehmen kann, können mit zod beschrieben werden und werden dann vom TanStack Router überprüft. In meiner Komponente kann ich dann sichergehen, dass die angegebenen Search-Parameter auch denen entsprechen, die ich erwarte. Außerdem sorgt TanStack Router beim Ändern von Search-Parametern dafür, dass nur die Komponenten neugerendert werden, die die geänderten Search-Parameter auch tatsächlich verwenden. Das Prinzip ist dabei ähnlich wie bei Redux, wo man aus dem globalen State eine Menge an Daten abfragt (mit useSelector) und nur wenn sich diese Daten geändert haben, wird die Komponente gerendert. Genauso funktioneirt es auch in TanStack Router: mit einer Selektor-Funktion wähle ich die Search-Parameter aus, die meine Komponente benötigt (z.B. nur das Sortier- aber nicht das Filterkriterium für eine Liste). Das ist ein tolles Feature, wenn man Teile seines Anwendungszustands in die URL verlagern möchte.

👉Eine Einführung in diese und weitere Features des TanStack Routers gebe ich in einem Video auf meinem YouTube-Kanal . Viel Spaß beim anschauen!

• Und hier findest Du mehr zu meinem Beratungs- und Schulungsangebot rund um React