router-core/search-params

Parse, validate and extract typed TanStack Router search parameters from URLs using Zod, Valibat, ArkType, or custom validators.

Updated Apr 2, 2026
One-click install
npx skills add https://github.com/abereghici/skills --skill router-core-search-params-abereghici
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: router-core/search-params
Source: https://github.com/abereghici/skills/tree/main/skills/tanstack-router/search-params
Command: npx skills add https://github.com/abereghici/skills --skill router-core-search-params-abereghici

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack Router search params can be complex to parse, validate, and type-safely access across nested routes. This skill provides a structured approach to validate and hydrate search params using multiple libraries and adapters, ensuring consistent behavior across the app.

Core Features & Use Cases

  • Library-agnostic validation: supports Zod (with adapters), Valibot, ArkType, or manual validators to define and enforce param shapes.
  • LoaderDeps and inheritance: enables scoping re-validation by selecting needed params and inheriting parent route values in children.
  • Custom serialization and middlewares: supports custom parse/stringify logic and middlewares like retain/strip for URL hygiene and performance.
  • Typed access at runtime: Route.useSearch() provides strongly typed values without extra annotations, across routes and code-split components.

Quick Start

Define your route with validateSearch using your preferred schema, then read the typed params with Route.useSearch() in components.

Frequently Asked Questions about router-core/search-params

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

FAQPage Schema
How do I validate TanStack Router search params with Zod or Valibot?

To validate TanStack Router search params, define a validateSearch contract using a schema from Zod, Valibot, ArkType, or a custom parse function. This enforces param shapes and provides strongly typed runtime values accessible via Route.useSearch().

How does search-param inheritance work across nested routes in TanStack Router?

Search-param inheritance allows child routes to access and inherit validated search params from parent routes. By defining validateSearch on parent routes, children automatically receive the typed values, ensuring consistent behavior and type-safe access across the nested route hierarchy.

What is the best way to scope re-validation for dynamic query parameters?

The best way to scope re-validation for dynamic query parameters is using loaderDeps. This feature selects specific search params needed by a loader, ensuring that route data only re-fetches or re-validates when those particular parameters change, improving performance.

Can I use custom serialization to parse and stringify URL search params?

Yes, you can use custom serialization to parse and stringify URL search params. This skill supports custom parse and stringify logic alongside middlewares like retain or strip, allowing you to maintain URL hygiene and control how query parameters are serialized and deserialized.

How do I access typed search params in code-split components with TanStack Router?

You can access typed search params in code-split components using Route.useSearch(). This hook provides strongly typed values directly from the validated search params without requiring extra annotations, ensuring type safety across routes and dynamically loaded components.