tanstack-router

Was macht tanstack-router?

Typsicheres Routing für React- und Solid-Anwendungen mit erstklassigen Suchparametern, Datenladefunktionen und nahtloser Integration in das React-Ökosystem.

Funktionen

• Typsichere Routen: Vollständige Typunterstützung für Routenparameter, Suchparameter und Zustand.
• Datenladefunktion: Integrierte Unterstützung für asynchrone Datenladefunktionen in Routen.
• Suchparameter: Erstklassige Unterstützung für URL-Suchparameter mit Typvalidierung.
• Verschachtelte Routen: Unterstützung für verschachtelte Layouts und Routen.
• Lazy Loading: Routen können per Lazy Loading geladen werden, um die Startgeschwindigkeit zu verbessern.
• Integration: Nahtlose Integration mit React-Ökosystem, einschließlich TanStack Query und anderen Tools.

Installation

npm install @tanstack/react-router

Grundlegende Nutzung

import { createRouter, createRoute, createRootRoute } from '@tanstack/react-router'

const rootRoute = createRootRoute()

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <div>Startseite</div>,
})

const router = createRouter({
  routeTree: rootRoute.addChildren([indexRoute]),
})

export default router

Suchparameter

const searchRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/suche',
  validateSearch: (search) => search as { q?: string },
  component: () => <div>Suche</div>,
})

Datenladefunktion

const dataRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/daten/$id',
  loader: async ({ params: { id } }) => {
    const data = await fetchData(id)
    return data
  },
  component: () => <div>Daten</div>,
})

Weitere Informationen

Besuchen Sie die offizielle Dokumentation für detailliertere Anleitungen und API-Referenzen.