SuperAPI AI Directory
Partner中文AI newsFavorites
Skillstanstack-router-overview-and-setup

tanstack-router-overview-and-setup

Frontend & websites

View repository

Updated 10-16 08:36

About this skill

TanStack Router Overview and Setup

Use this skill when the task is primarily about first-time setup, package and mode selection, or deciding which TanStack Router surface owns the work.

Scope

  • current docs topology and release snapshot
  • install and quick-start decisions
  • choosing file-based vs code-based routing
  • routing work to the correct TanStack Router skill
  • keeping TanStack Start separate from router-only tasks

Routing cues

  • install TanStack Router, quick start, choose file-based vs code-based, compare docs surfaces, or verify the current release snapshot -> use this skill
  • nested routes, layout routes, pathless routes, params, Link, Navigate, useNavigate, or route masking -> use tanstack-router-route-trees-and-navigation
  • validateSearch, loaderDeps, loader, beforeLoad, route context, auth guards, preloading, or cache integration -> use tanstack-router-search-params-and-loaders
  • pendingComponent, errorComponent, notFoundComponent, scroll restoration, navigation blocking, head(), or Router SSR -> use tanstack-router-runtime-behavior-and-ssr
  • src/routes, routeTree.gen.ts, file naming conventions, virtual routes, tsr generate, .lazy.tsx, plugin config, Devtools wiring, or ESLint Router rules -> use tanstack-router-file-based-routing-and-tooling

Workflow

  1. Read references/docs-map.md first.
  2. If the task mentions versions, package selection, or install mode, read references/package-and-release-snapshot.md.
  3. Decide whether the project should stay file-based or code-based before proposing changes.
  4. Prefer the supported bundler plugin for file-based routing. Use the Router CLI only when the bundler integration is unavailable or the project needs an explicit generator workflow.
  5. Keep TanStack Start out of scope unless the user is explicitly asking about Start, server functions, static prerendering, or ISR.

Quick example

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

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

const routeTree = rootRoute.addChildren([])

const router = createRouter({ routeTree })

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

Guardrails

  • The current stable docs live on the v1 docs channel. Use the docs plus GitHub releases together when you need both behavior and dated version evidence.
  • File-based routing is the recommended default in the official docs. Reach for code-based routing when the project explicitly wants manual route-tree control.
  • Treat TanStack Router and TanStack Start as separate surfaces. Router covers client-first routing and Router SSR; Start is the full-stack framework layer.
  • Keep setup decisions aligned with the actual bundler and route mode the project already uses. Do not introduce file generation, CLI watch processes, or plugin wiring casually.

Canonical packages

  • @tanstack/react-router
  • @tanstack/react-router-devtools
  • @tanstack/router-plugin
  • @tanstack/router-cli

Maintenance

  • Snapshot date: 2026-03-24
  • Release snapshot: GitHub release release-2026-03-23-1527
  • Package snapshot: @tanstack/react-router@1.168.3, @tanstack/router-core@1.168.3

References