TanStack Router Core

TanStack Router is a type-safe router for React and Solid with built-in SWR caching, JSON-first search params, file-based route generation, and end-to-end type inference. The core is framework-agnostic; React and Solid bindings layer on top.

CRITICAL: TanStack Router types are FULLY INFERRED. Never cast, never annotate inferred values. This is the #1 AI agent mistake.

CRITICAL: TanStack Router is CLIENT-FIRST. Loaders run on the client by default, NOT server-only like Remix/Next.js. Do not confuse TanStack Router APIs with Next.js or React Router.

Sub-Skills

Task	Sub-Skill
Validate, read, write, transform search params	router-core/search-params/SKILL.md
Dynamic segments, splats, optional params	router-core/path-params/SKILL.md
Link, useNavigate, preloading, blocking	router-core/navigation/SKILL.md
Route loaders, SWR caching, context, deferred data	router-core/data-loading/SKILL.md
Auth guards, RBAC, beforeLoad redirects	router-core/auth-and-guards/SKILL.md
Automatic and manual code splitting	router-core/code-splitting/SKILL.md
404 handling, error boundaries, notFound()	router-core/not-found-and-errors/SKILL.md
Inference, Register, from narrowing, TS perf	router-core/type-safety/SKILL.md
Streaming/non-streaming SSR, hydration, head mgmt	router-core/ssr/SKILL.md

Quick Decision Tree

Need to add/read/write URL query parameters?
  → router-core/search-params

Need dynamic URL segments like /posts/$postId?
  → router-core/path-params

Need to create links or navigate programmatically?
  → router-core/navigation

Need to fetch data for a route?
  Is it client-side only or client+server?
    → router-core/data-loading
  Using TanStack Query as external cache?
    → compositions/router-query (separate skill)

Need to protect routes behind auth?
  → router-core/auth-and-guards

Need to reduce bundle size per route?
  → router-core/code-splitting

Need custom 404 or error handling?
  → router-core/not-found-and-errors

Having TypeScript issues or performance problems?
  → router-core/type-safety

Need server-side rendering?
  → router-core/ssr

Minimal Working Example

// src/routes/__root.tsx
import { createRootRoute, Outlet } from "@tanstack/react-router"

export const Route = createRootRoute({
  component: () => <Outlet />,
})

// src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router"

export const Route = createFileRoute("/")({
  component: () => <h1>Home</h1>,
})

// src/router.tsx
import { createRouter } from "@tanstack/react-router"
import { routeTree } from "./routeTree.gen"

const router = createRouter({ routeTree })

// REQUIRED for type safety — without this, Link/useNavigate have no autocomplete
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router
  }
}

export default router

// src/main.tsx
import { RouterProvider } from "@tanstack/react-router"
import router from "./router"

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

Common Mistakes

HIGH: createFileRoute path string must match the file path

The Vite plugin manages the path string in createFileRoute. Do not change it manually — it must match the file's location under src/routes/:

// File: src/routes/posts/$postId.tsx
export const Route = createFileRoute("/posts/$postId")({
  // ✅ matches file path
  component: PostPage,
})

export const Route = createFileRoute("/post/$postId")({
  // ❌ silent mismatch
  component: PostPage,
})

The plugin auto-generates this string. If you rename a route file, the plugin updates it. Never edit the path string by hand.

Version Note

This skill targets @tanstack/router-core v1.166.2 and @tanstack/react-router v1.166.2. APIs are stable. Splat routes use $ (not *); the * compat alias will be removed in v2.