tanstack-skills/tanstack-router

Que fait tanstack-router ?

Routage type-safe pour applications React et Solid avec prise en charge de premier ordre des paramètres de recherche, chargement de données et intégration transparente avec l'écosystème React.

Démarrage rapide

npm install @tanstack/react-router
# ou
pnpm add @tanstack/react-router

Fonctionnalités principales

• Routage type-safe complet : Les routes, paramètres et données sont typés statiquement.
• Paramètres de recherche de premier ordre : Validation et typage des paramètres d'URL avec Zod ou d'autres schémas.
• Chargement de données intelligent : Hooks comme useLoaderData et useMatch pour charger et transformer les données.
• Intégration avec React Query : Utilisez TanStack Query pour la gestion d'état côté serveur.
• Transitions et animations : Support de transitions d'état et d'animations via @tanstack/react-router-ssr.
• Optimisation automatique : Préchargement, mise en cache et rendu côté serveur (SSR).

Exemple de base

import { createRouter, RouterProvider, Route, rootRoute } from '@tanstack/react-router'

const rootRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <div>Accueil</div>,
})

const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <div>Bienvenue sur TanStack Router !</div>,
})

const routeTree = rootRoute.addChildren([indexRoute])

const router = createRouter({ routeTree })

function App() {
  return <RouterProvider router={router} />
}

Utilisation avancée

Validation des paramètres de recherche

import { z } from 'zod'

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

const searchRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/search',
  validateSearch: searchSchema.parse,
  component: SearchComponent,
})

function SearchComponent() {
  const search = searchRoute.useSearch()
  return <div>Page : {search.page}</div>
}

Chargement de données

const dataRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/data',
  loader: async () => {
    const response = await fetch('/api/data')
    return response.json()
  },
  component: () => {
    const data = dataRoute.useLoaderData()
    return <div>{JSON.stringify(data)}</div>
  },
})

Intégration avec React Query

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  )
}

Configuration recommandée dans SKILL.md

• Ajoutez tanstack-router comme dépendance.
• Utilisez createRouter exporté pour créer votre routeur.
• Définissez vos routes avec new Route et composez-les avec addChildren.
• Si vous utilisez TypeScript, définissez RouteTree manuellement pour tirer parti du typage strict.

Ressources

• Documentation officielle
• Exemples sur GitHub
• Plugin ESLint pour TanStack Router