TanStack Router – Praxisnotizen

TanStack Router ist ein dateibasiertes Routing-Framework für React mit vollständiger TypeScript-Unterstützung. Der größte Unterschied zu vielen anderen Routern: Links, Parameter und Weiterleitungen werden zur Kompilierzeit geprüft. Ein Tippfehler in einer Ziel-URL fällt beim Build auf, nicht erst im Browser.

Für eine Testseite wie diese ist das ideal: Ich kann Routen umbenennen, umziehen oder löschen und sehe sofort an jeder Stelle im Code, wo ein Verweis kaputt gegangen wäre.

Routen entstehen allein durch Dateinamen im Routen-Ordner. Aus impressum.tsx wird die URL /impressum, aus blog.tanstack-router.tsx wird /blog/tanstack-router – Punkte im Dateinamen verschachteln also die Adresse. Dynamische Abschnitte beginnen mit $, etwa posts.$slug.tsx für /posts/mein-artikel.

Wichtig ist die Abstimmung zwischen Datei und Code: Jede Datei ruft createFileRoute mit genau der Route auf, die aus dem Dateinamen folgt:

// Datei: src/routes/blog.tanstack-router.tsx
export const Route = createFileRoute("/blog/tanstack-router")({
  component: TanstackRouterGuide,
});

Passt der String nicht zum Dateinamen, bricht der Build mit einem Fehler im Routen-Baum ab. Das klingt streng, hat mir aber schon mehrfach Tippfehler direkt beim Schreiben verraten.

Statt roher <a href>-Tags nutzt man die Link-Komponente. Sie kennt alle existierenden Routen und verlangt Parameter mit dem exakten Namen:

<Link to="/blog/$slug" params={{ slug: "tanstack-router" }}>
  Artikel lesen
</Link>

Gibt es die Route nicht oder fehlt ein Parameter, meckert TypeScript. Genau so habe ich den Footer hier gebaut: Jeder Verweis wird geprüft, tote Links können kaum entstehen.

Jede Route kann einen loader haben, der vor dem Rendern läuft. Zusammen mit TanStack Query wird daraus ein Muster, das serverseitig vorlädt und clientseitig cacht:

createFileRoute("/blog/$slug")({
  loader: ({ params }) =>
    queryClient.ensureQueryData(postQueryOptions(params.slug)),
  component: Post,
});

Für diese private Testseite reichen statische Inhalte, aber die Loader-Variante gehört zu den Dingen, die ich hier systematisch austeste – auch, weil sie sich direkt auf Core Web Vitals auswirkt: Die Inhalte stehen beim ersten Rendern schon bereit.

Drei Erkenntnisse aus meinen Notizen: Erstens zahlt sich Typsicherheit beim Routing vor allem bei Umbauten aus – Refactoring wird zum Suchspiel mit dem Compiler statt zum Klicken durch jede Seite. Zweitens sollte man generierte Dateien wie den Routen-Baum nie von Hand editieren; der Router erzeugt sie selbst. Drittens lassen sich SEO-Details wie Titel, Canonical-URL und strukturierte Daten pro Route sauber mitführen, weil jede Route eine eigene Definition besitzt.

TanStack Router ist damit für mich das Routing-Werkzeug, an dem ich moderne React-Muster am besten lernen kann. Diese Seite bleibt die Spielwiese dafür – ohne kommerzielle Absicht, aber mit echtem Code.