TanStack Router v1: Erste Schritte mit typsicherem Routing

TanStack Router v1 ist jetzt stabil und bringt einen grundlegend anderen Ansatz für das Routing in React-Anwendungen mit. Im Gegensatz zu herkömmlichen Routern behandelt TanStack Router Routen als erstklassige TypeScript-Bürger — was Ihnen End-to-End-Typsicherheit von der Routendefinition bis zur Link-Generierung bietet.

Warum TanStack Router?

Bevor Sie sich in die Einrichtung stürzen, lohnt es sich zu verstehen, warum TanStack Router existiert. Die Kernprobleme, die er löst:

• Typsichere Links — <Link to="/blog/$slug" params={{ slug: 'hello' }}> ist vollständig typisiert
• Eingebautes Datenladen — Route-Loader mit Suspense- und Streaming-Unterstützung
• Suchparameter als Zustand — validierte, typisierte URL-Suchparameter
• Verschachtelte Layouts — komplexe UIs mit verschachtelten Routenbäumen komponieren

Installation

pnpm add @tanstack/react-router
pnpm add -D @tanstack/router-plugin @tanstack/router-devtools

Dateibasiertes Routing-Setup

Fügen Sie das Router-Plugin zu Ihrer Vite-Konfiguration hinzu:

// vite.config.ts
import { tanstackRouter } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [
    tanstackRouter({ autoCodeSplitting: true }),
    react(),
  ],
})

Erstellen Ihrer ersten Route

Erstellen Sie src/routes/index.tsx:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: HomePage,
})

function HomePage() {
  return <h1>Welcome to my app</h1>
}

Typsichere Navigation

Die wahre Leistungsfähigkeit zeigt sich, wenn Sie zwischen Routen navigieren:

import { Link, useNavigate } from '@tanstack/react-router'

// Vollständig typisiert — TypeScript erkennt ungültige Routen
function NavBar() {
  const navigate = useNavigate()

  return (
    <nav>
      <Link to="/" className="...">Home</Link>
      <Link to="/blog/$slug" params={{ slug: 'my-post' }}>Blog</Link>
      <button onClick={() => navigate({ to: '/dashboard' })}>
        Dashboard
      </button>
    </nav>
  )
}

Route Loaders

TanStack Router bietet erstklassige Unterstützung für das Laden von Daten auf Routenebene:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/users/$userId')({
  loader: async ({ params }) => {
    const user = await fetchUser(params.userId)
    return { user }
  },
  component: UserPage,
})

function UserPage() {
  const { user } = Route.useLoaderData()
  return <div>{user.name}</div>
}

Suchparameter

Eine der leistungsstärksten Funktionen von TanStack Router sind typsichere Suchparameter:

import { createFileRoute } from '@tanstack/react-router'
import { z } from 'zod'

const searchSchema = z.object({
  page: z.number().default(1),
  filter: z.string().optional(),
})

export const Route = createFileRoute('/products')({
  validateSearch: searchSchema,
  component: ProductsPage,
})

function ProductsPage() {
  const { page, filter } = Route.useSearch()
  // page ist als number typisiert, filter als string | undefined
  return <ProductGrid page={page} filter={filter} />
}

Verschachtelte Layouts

Erstellen Sie komplexe UI-Kompositionen mit Layout-Routen:

src/routes/
  __root.tsx          ← Root-Layout (header, footer)
  dashboard.tsx       ← Dashboard-Layout (sidebar)
  dashboard/
    index.tsx         ← /dashboard
    analytics.tsx     ← /dashboard/analytics
    settings.tsx      ← /dashboard/settings

Jede Layout-Datei rendert <Outlet />, um ihre untergeordneten Elemente anzuzeigen:

// dashboard.tsx
import { createFileRoute, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/dashboard')({
  component: DashboardLayout,
})

function DashboardLayout() {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">
        <Outlet />
      </main>
    </div>
  )
}

Wie geht es weiter?

Nachdem die Grundlagen nun funktionieren, erkunden Sie Folgendes:

• Kontext — Teilen von Daten zwischen übergeordneten und untergeordneten Routen
• Pending-Komponenten — Anzeigen von Ladezuständen während der Navigation
• Error Boundaries — Elegantes Behandeln von Routenfehlern
• Route-Guards — Umleiten von nicht authentifizierten Benutzern

Die Kombination von TanStack Router aus Typsicherheit, dateibasierten Konventionen und leistungsstarkem Datenladen macht ihn zu einer hervorragenden Grundlage für jede React-Anwendung.