TanStack Router : le routage type-safe et les search params validés qui détrônent React Router en 2026

Après TanStack Query, Tanner Linsley remet le couvert avec TanStack Router, un routeur React qui pousse la sécurité de typage jusqu'au moindre paramètre d'URL. Search params validés par Zod, params de route inférés, code splitting automatique et data loading parallèle : en 2026, le routeur s'impose comme l'alternative la plus rigoureuse à React Router pour les SPA React et Solid exigeantes, et alimente désormais TanStack Start, le framework full-stack de l'écosystème.

Un routeur conçu pour TypeScript, pas adapté à TypeScript

Là où React Router conserve une API issue de l'ère JavaScript et empile les types par-dessus, TanStack Router est pensé TypeScript-first dès la première ligne de code. Chaque route déclare ses params, ses search params et ses loaders dans un objet fortement typé, et l'inférence remonte automatiquement jusqu'aux composants <Link>, aux hooks useParams(), useSearch() et aux navigations programmées. Tenter de naviguer vers /users/$userId sans fournir le bon userId, ou lire un search param qui n'existe pas, devient une erreur de compilation immédiate. Le résultat : la refactorisation d'une route ne casse plus silencieusement votre application en production six mois plus tard.

Search params : la fonctionnalité qui change tout

Dans la plupart des routeurs, les search params restent un sac plat de chaînes de caractères que chaque composant doit parser et valider à la main. TanStack Router en fait un citoyen de première classe : vous déclarez un schéma de validation (souvent avec Zod ou Valibot), et le routeur s'occupe de parser, valider, sérialiser et désérialiser les valeurs typées. Les filtres d'une liste, la pagination, la recherche, les onglets : tout devient un état partageable par URL, avec des types stricts et une API navigate() qui refuse les paramètres invalides. C'est l'argument décisif pour les dashboards et les SaaS où l'URL doit refléter fidèlement l'état de l'interface.

Data loading parallèle et intégration native avec TanStack Query

Chaque route peut exposer un loader qui démarre le chargement de ses données en parallèle de la navigation, sans attendre le rendu du composant. Combiné à TanStack Query, ce mécanisme permet de pré-charger les caches, d'éviter les cascades de requêtes et de supprimer les waterfalls que tout le monde subit avec un useEffect classique. Le routeur expose aussi un système de prefetch au survol des liens, une notion de routes parentes qui partagent leurs données et une stratégie de revalidation fine pour les retours arrière. Le rendu devient instantané, et l'application ressemble enfin à une vraie SPA performante plutôt qu'à une succession de skeletons.

File-based routing, TanStack Start et l'écosystème en 2026

Le routeur supporte deux modes : code-based pour ceux qui aiment garder le contrôle complet, ou file-based avec un plugin Vite qui scanne le dossier src/routes et génère un arbre de routes typé en arrière-plan. Cette dernière approche, similaire à Next.js ou Remix, séduit les équipes habituées aux conventions. En 2026, TanStack Router est aussi la fondation de TanStack Start, le nouveau framework full-stack qui ajoute SSR, server functions et streaming React au-dessus du routeur, avec un déploiement natif sur Vercel, Netlify et Cloudflare Workers. L'écosystème, longtemps cantonné à TanStack Query, devient une stack complète et cohérente.