tanstack-router

Provide type-safe routing for React and Solid applications with typed search params and data loading.

6|4|Updated Nov 1, 2025
One-click install
npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-router-montte-erp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-router
Source: https://github.com/Montte-erp/montte-nx/tree/main/.agents/skills/tanstack-router
Command: npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-router-montte-erp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router eliminates fragile, untyped routing code and ad-hoc navigation logic by providing a single, type-safe routing system that unifies path params, search params, data loading, and navigation behaviors for React and Solid applications. It reduces runtime errors, prevents mismatched route parameter usage, and centralizes routing concerns so teams can reason about navigation, preloading, and access control with confidence.

Core Features & Use Cases

  • File-based and code-based route trees with first-class TypeScript integration for fully typed params, search, and loader data.
  • Built-in data loaders, loaderDeps, deferred loading, and preloading strategies to coordinate data fetching, caching, and UX for fast navigations.
  • Advanced search param validation, serialization options, and typed hooks (useParams, useSearch, useLoaderData, useNavigate) for safe programmatic navigation.
  • Auth and guard patterns via beforeLoad, route-level error/pending/notFound handlers, scroll restoration, and route masking for complex apps.
  • Use Case: Build a dashboard with paginated lists, authenticated sections, and optimistic preloading where routes provide typed loader data to components and integrate with a QueryClient.

Quick Start

Create a file-based /posts route that validates search params, loads paginated posts via a typed loader, and exposes type-safe hooks for params and search.

Frequently Asked Questions about tanstack-router

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build type-safe routing for a React or Solid single-page application?

Type-safe routing for React and Solid apps is achieved by unifying path params, search params, and navigation behaviors into a single typed system. This eliminates fragile untyped routing code and prevents mismatched route parameter usage at runtime.

How do I validate search params and load data before rendering a route in React?

Search param validation and data loading are handled through built-in typed loaders and dependency tracking. You validate search params using serialization options, fetch data via typed loaders, and expose it to components using the useLoaderData hook.

Does TanStack Router work with Solid and React for full-stack applications?

TanStack Router works with both React and Solid for single-page and full-stack applications. It provides first-class TypeScript integration for typed params, search, and loader data across both frameworks to centralize routing concerns.

What is the best way to implement auth guards and access control in a React router?

Auth guards and access control are implemented via the beforeLoad lifecycle hook. This pattern allows you to centralize access control logic, coordinate preloading strategies, and handle route-level pending or notFound states safely.

How do I coordinate preloading and deferred loading for fast navigations in a React app?

Preloading and deferred loading are coordinated using built-in loader dependencies and strategies. By tracking loader dependencies and applying preloading strategies, you optimize data fetching and caching for fast, link-driven navigations.

Can I integrate TanStack Router with a QueryClient for data fetching in a dashboard?

TanStack Router integrates with a QueryClient to build dashboards with authenticated sections and optimistic preloading. Routes provide typed loader data directly to components, streamlining data fetching, caching, and user experience.