router-core/search-params

Validate, read, and write URL search params in TanStack Router applications.

1.4k|34|Updated Mar 7, 2024
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill router-core-search-params-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/search-params
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-router-search-params
Command: npx skills add https://github.com/mehdibha/dotUI --skill router-core-search-params-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires zod, @tanstack/zod-adapter, @tanstack/react-router, and includes references (resource) components.

What problem does it solve? Managing URL search params as typed application state is error-prone: manual parsing loses type safety, validation libraries behave inconsistently across adapters, and navigation often silently drops existing params. This Skill provides correct patterns for treating search params as JSON-first, fully typed state in TanStack Router. ## Core Features & Use Cases - Typed Validation: Define search schemas with Zod, Valibot, or ArkType via validateSearch, including the critical fallback() vs .catch() distinction between Zod v3 and v4. - Reading & Writing Params: Use Route.useSearch(), getRouteApi(), useSearch({ strict: false }), and function-form search updates in Link and useNavigate() to preserve existing params. - Middlewares & Serialization: Apply retainSearchParams and stripSearchParams middlewares, custom parseSearch/stringifySearch serialization, and loaderDeps for precise loader cache keys. - Use Case: Build a product listing page where page, filter, and sort live in the URL as validated typed state, defaults are stripped from the URL, and the data loader only re-runs when the page param changes. ## Quick Start Add validated, type-safe search params to my TanStack Router products route using Zod with defaults and a pagination link that preserves existing params.

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 search params in TanStack Router with Zod?▼

Define a Zod schema and pass it to the route's validateSearch option. With Zod v3 and zodValidator, use fallback() from @tanstack/zod-adapter instead of .catch(), since .catch() makes the output type unknown. Zod v4 should use .catch() directly.

How do I update search params without losing existing ones?▼

Use the function form of the search prop on Link or useNavigate: search={(prev) => ({ ...prev, page: prev.page + 1 })}. Passing a plain object replaces all search params, dropping any existing ones.

Does TanStack Router support Valibot or ArkType for search validation?▼

Yes, validateSearch works with Zod, Valibot, and ArkType adapters. The fallback() requirement is specific to Zod v3 with zodValidator; Valibot and ArkType use their own fallback mechanisms.

Why does my TanStack Router loader re-run on every search param change?▼

Returning the entire search object from loaderDeps makes the loader re-run when any param changes. Instead, pick only the params the loader needs, such as loaderDeps: ({ search }) => ({ page: search.page }).

Can I put Date objects in TanStack Router search params?▼

No, Date objects do not serialize correctly to JSON in URLs. Convert them to ISO strings with new Date().toISOString() before passing them in search params.