router-core/search-params

Validate TanStack Router search params with type-safe schemas and middlewares.

14.9k|1.8k|Updated Jan 14, 2019
One-click install
npx skills add https://github.com/TanStack/router --skill router-core-search-params
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/search-params
Source: https://github.com/TanStack/router/tree/main/packages/router-core/skills/router-core/search-params
Command: npx skills add https://github.com/TanStack/router --skill router-core-search-params

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack Router's search params are powerful but complex to validate, persist, and share across nested routes. This skill provides a structured approach to validating search params, applying middlewares, and customizing serialization for URL parameters.

Core Features & Use Cases

  • Validation and parsing of search params via adapters for Zod, Valibot, or ArkType
  • Inheritance of parent route search params into child routes for consistent UX
  • Custom serialization and loaderDeps guidance to control when and how search params affect cache keys
  • Middlewares like retainSearchParams and stripSearchParams to preserve or prune params across navigations

Quick Start

Define a validation schema for your route's search params and read parsed values via Route.useSearch() in your component.

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?▼

You can validate TanStack Router search params using adapters for Zod, Valibot, or ArkType by defining a schema and applying it through the `validateSearch` method to ensure type-safe URL parameter parsing.

How do I preserve search params when navigating between nested routes?▼

To preserve search params across navigations in nested routes, apply the `retainSearchParams` middleware, which ensures parent route parameters are inherited and kept intact during route transitions.

How does loaderDeps affect route caching with search params?▼

`loaderDeps` controls when and how search params affect route cache keys, allowing you to determine the specific URL parameters that trigger data fetching or cache invalidation during navigation.

Can I customize URL serialization for search params in TanStack Router?▼

Yes, you can customize URL serialization by defining custom `parseSearch` and `stringifySearch` rules, allowing you to control how search params are encoded and decoded in the browser URL.

How do I remove specific search params during navigation?▼

You can remove specific search params during navigation by applying the `stripSearchParams` middleware, which prunes defined parameters from the URL when transitioning between routes.

How do parent route search params inherit down to child routes?▼

Parent route search params inherit down to child routes by applying middlewares that manage parameter persistence, ensuring a consistent UX by sharing validated URL state across the nested route hierarchy.