skills.rest
rezics
rezicsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

router-core/path-params

Extract dynamic URL parameters from TanStack Router routes.

6|1|Updated Jun 1, 2025
Search Tags:#routing#web-development#type-safety#tanstack-router#dynamic-params#path-params
One-click install
npx skills add https://github.com/rezics/rezics --skill router-core-path-params-rezics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/path-params
Source: https://github.com/rezics/rezics/tree/main/.agents/skills/tanstack/router/router-core/path-params
Command: npx skills add https://github.com/rezics/rezics --skill router-core-path-params-rezics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Path parameters are dynamic URL segments that must be captured into named variables and used safely across routes. This skill provides clear guidance on defining dynamic segments ($paramName), catch-all splats ($), optional params ({-$paramName}), and prefix/suffix patterns ({$param}.ext), plus utilities like useParams, and params.parse/stringify to transform values while preserving type safety.

Core Features & Use Cases

  • Capture dynamic segments using $paramName in route definitions to expose strongly typed values to loaders and components.
  • Support Splat / Catch-All routes with $_splat for flexible path matching and routing.
  • Use Optional Params with {-$paramName} to represent optional segments that may be undefined.
  • Leverage Prefix / Suffix patterns like {/path-{$param}} and etc to model complex URL schemas.
  • Access params in navigation and loaders with Route.useParams and the params helpers, including parsing and stringifying for type-safe transformations.
  • Enable i18n locale patterns in routes via path params where appropriate.

Quick Start

Define a route with '/posts/$postId' and retrieve the dynamic postId using Route.useParams().

Frequently Asked Questions about router-core/path-params

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

FAQPage Schema
How do I extract dynamic path parameters in TanStack Router?▼

To extract dynamic path parameters in TanStack Router, define routes using the $paramName pattern and retrieve the values in loaders or components with Route.useParams(), which ensures the variables are strongly typed and safe for runtime use.

What is the best way to handle catch-all or splat routes in TanStack Router?▼

Catch-all or splat routes in TanStack Router are handled using the $ pattern, which matches flexible path segments and exposes them via the $_splat parameter for broad URL matching scenarios.

Can I define optional path parameters in TanStack Router?▼

Yes, optional path parameters can be defined in TanStack Router using the {-$paramName} syntax, allowing route segments that may be undefined while preserving type safety across your application.

How do I parse and stringify URL parameters while maintaining type safety?▼

You can parse and stringify URL parameters in TanStack Router by applying the params.parse and params.stringify utilities, which transform dynamic path values while enforcing strict type safety during navigation.

Why should I use TanStack Router params instead of string interpolation for URLs?▼

You should use TanStack Router params instead of string interpolation to enforce runtime correctness and safety, preventing malformed URLs and ensuring dynamic segments are properly captured and strongly typed.

Does TanStack Router support prefix and suffix patterns for dynamic URL segments?▼

Yes, TanStack Router supports prefix and suffix patterns for dynamic URL segments using syntax like {/path-{$param}} and {/{$param}.ext}, allowing you to model complex URL schemas while extracting the dynamic values safely.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
wsimmondswsimmonds
109

nextjs-dynamic-routes-params

Maps URL segments to dynamic route files and accesses params in Next.js App Router.

Community
Basic
jherrjherr

tanstack-start-typesafe-routing

Create type-safe links and navigation in TanStack Start with TypeScript and Zod.

Community
Intermediate
hashintelhashintel
7

router-core-search-params

Validate, manage, and serialize URL search parameters with Zod, Valibot, or ArkType.

Official
Intermediate