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.