skills.rest
mehdibha
mehdibhaCOMMUNITY
Explore all skills by this author →
Website𝕏@mehdibhaGitHub

router-core/path-params

Implement dynamic path segments, splat routes, and optional params in TanStack Router.

1.4k|34|Updated Mar 7, 2024
Search Tags:#typescript#tanstack-router#react routing#useparams#splat routes#path params#dynamic segments
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill router-core-path-params-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/path-params
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-router-path-params
Command: npx skills add https://github.com/mehdibha/dotUI --skill router-core-path-params-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router.

What problem does it solve? Defining and consuming dynamic URL segments in TanStack Router involves several distinct syntaxes ($param, $, {-$param}, {$param}.ext), and common mistakes like interpolating params into the to string break type safety and encoding. ## Core Features & Use Cases - Dynamic Segments: Capture URL segments with $paramName and read them via Route.useParams() with full type inference. - Splat and Optional Params: Use bare $ for catch-all routes (_splat key) and {-$param} syntax for optional segments, including i18n locale patterns. - Prefix/Suffix Patterns: Match partial segments like post-{$postId} or {$fileName}.txt within a single path level. - Use Case: Build a blog where /posts/$postId loads a post in a loader, /files/$ serves nested file paths, and /{-$locale}/about supports optional language prefixes. ## Quick Start Show me how to define a TanStack Router route with a dynamic postId param and navigate to it with the Link component.

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 use dynamic path params in TanStack Router?▼

Define a segment with a $ prefix like /posts/$postId, then read it with Route.useParams() or in the loader via the params argument. Types are fully inferred, so never annotate the return of useParams().

How do I create a catch-all or splat route in TanStack Router?▼

End the route path with a bare $ sign, for example /files/$. The captured remainder is available under the _splat key from Route.useParams(). The older * syntax works in v1 but will be removed in v2.

Does TanStack Router support optional path parameters?▼

Yes, use the {-$paramName} syntax, such as /posts/{-$category}. When the segment is absent the param value is undefined, which is useful for patterns like optional i18n locales such as /{-$locale}/about.

Why is interpolating params into the Link to string wrong?▼

Interpolating like to={`/posts/${postId}`} breaks type safety and param encoding. Always pass the route pattern to the to prop and supply values through the params prop, either as an object or a function preserving previous params.

Can TanStack Router path params be numbers instead of strings?▼

Path params are always strings by default. Use the route's params.parse and params.stringify options for bidirectional transformation, for example parsing postId with parseInt so loaders receive a number.

Related Skills

Explore More Software Engineering Skills→
mathfalconmathfalcon

tanstack-react-router_routing

Define code-based route trees with createRootRoute and createRoute for React apps.

Community
Intermediate
Montte-erpMontte-erp
6

tanstack-router

Provide type-safe routing for React and Solid applications with typed search params and data loading.

Official
Advanced
MichaelFriezeMichaelFrieze

tanstack-router

Creates type-safe file-based routes with validated search parameters and data loaders for React/Solid.

Community
Intermediate
mathfalconmathfalcon

tanstack-react-router_installation

Install and configure TanStack Router for file-based routing in React projects.

Community
Basic