¿Qué hace tanstack-router?
Enrutamiento con seguridad de tipos para aplicaciones React y Solid con parámetros de búsqueda de primera clase, carga de datos e integración perfecta con el ecosistema React.
Descripción general
TanStack Router es una biblioteca de enrutamiento moderna que ofrece tipado seguro completo para React y Solid. Permite definir rutas con tipos estrictos para parámetros de ruta, parámetros de búsqueda y datos cargados, lo que reduce errores en tiempo de ejecución y mejora la productividad del desarrollador.
Características principales
- Tipado seguro: Todos los parámetros de ruta y búsqueda tienen tipos TypeScript inferidos automáticamente.
- Carga de datos: Soporte integrado para cargar datos antes de renderizar una ruta, con estados de carga y error.
- Parámetros de búsqueda: Manejo de primera clase de
searchParamscon validación y serialización. - Integración con el ecosistema: Funciona sin problemas con React Query, Zustand, y otras bibliotecas populares.
- Rutas anidadas: Soporte para layouts y rutas jerárquicas.
Instalación
Para instalar TanStack Router en tu proyecto:
npm install @tanstack/react-router
# o
npm install @tanstack/solid-router
Uso básico
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
const router = createRouter({ routeTree })
declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
function App() {
return <RouterProvider router={router} />
}
export default App
Parámetros de búsqueda
import { useSearch } from '@tanstack/react-router'
function SearchComponent() {
const { q, page } = useSearch({ from: '/search' })
return <div>Buscando: {q}, Página: {page}</div>
}
Compatibilidad
Este skill es compatible con:
- Claude Code: Configurar como skill en
~/.claude/skills.json. - Cursor: Usar como instrucción personalizada en
cursor.d.ts. - Codex: Incluir en la configuración de habilidades.
Recursos adicionales
Licencia
MIT