⚡Routing

TanStack Router einrichten

Typsicheres Routing für React — April 2026

TanStack Router bringt vollständig typsicheres Routing in deine React-App. Jeder Link, jeder Parameter und jeder Search-Param ist TypeScript-geprüft. Tippfehler in URLs fallen beim Build auf, nicht erst beim User.

Pro-Tip — Der schnelle Weg

TanStack Router generiert automatisch Route-Typen — deine IDE zeigt dir per Autocomplete alle verfügbaren Routes.

Seite 1

TanStack Router installieren

Installiere den Router und das Vite-Plugin für automatische Route-Generierung.

npm install @tanstack/react-router
npm install --save-dev @tanstack/router-plugin

# Fuer Vite, in vite.config.ts:
import { TanStackRouterVite } from '@tanstack/router-plugin/vite';

export default defineConfig({
plugins: [TanStackRouterVite(), react()],
});

Routes als Dateien definieren

Erstelle Routes als Dateien — ähnlich wie Next.js, aber mit voller TypeScript-Kontrolle.

// src/routes/__root.tsx
import { createRootRoute, Outlet } from "@tanstack/react-router";

export const Route = createRootRoute({
component: () => (
<div>
<nav>...</nav>
<Outlet />
</div>
),
});

// src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({ component: Home });
function Home() { return <h1>Startseite</h1>; }

// src/routes/users/$userId.tsx
export const Route = createFileRoute("/users/$userId")({
component: UserPage,
loader: async ({ params }) => fetchUser(params.userId),
});

Typsichere Links und Search Params

Nutze die Link-Komponente mit Autocomplete für Routes und Parameter.

import { Link, useSearch } from "@tanstack/react-router";

// Typsicherer Link — Tippfehler werden sofort erkannt:
<Link to="/users/$userId" params={{ userId: "123" }}>
Zum User
</Link>

// Search Params mit Validierung:
export const Route = createFileRoute("/products")({
validateSearch: (search) => ({
page: Number(search.page) || 1,
sort: (search.sort as string) || "name",
}),
});

function Products() {
const { page, sort } = useSearch({ from: "/products" });
// page und sort sind typisiert!
}

Seite 2

Warum das funktioniert

Volle TypeScript-Sicherheit: ungültige Links und Parameter fallen beim Build auf
Automatische Route-Generierung aus der Dateistruktur
Eingebaute Loader verhindern Waterfall-Requests und Loading-Spinners
Search Params als First-Class Feature statt Afterthought

Tipps

File-based Routing: Routes werden automatisch aus der Ordnerstruktur generiert
Loader-Funktionen laden Daten bevor die Seite rendert — keine Loading-Spinners
Search Params sind typsicher und validiert — nie wieder parseInt(searchParams.get('page'))
Pending UI eingebaut: zeige automatisch Loading-States während Navigation
DevTools verfügbar: @tanstack/router-devtools für Debugging

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen