router-core-path-params

Implements dynamic path parameters, splat routes, and optional segments in TanStack Router.

Updated Dec 21, 2025
One-click install
npx skills add https://github.com/Angael/veles --skill router-core-path-params-angael
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core-path-params
Source: https://github.com/Angael/veles/tree/main/.agents/skills/router-core-path-params
Command: npx skills add https://github.com/Angael/veles --skill router-core-path-params-angael

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 misusing them breaks type safety or produces incorrect routes. This Skill provides the correct patterns for every path param variant so routes are typed, encoded, and navigable. ## Core Features & Use Cases - Dynamic Segments & Splat Routes: Capture named segments with $paramName and catch-all paths with the bare $ route exposing _splat. - Optional & Prefix/Suffix Params: Use {-$paramName} for optional segments (including i18n locale patterns) and {$param}.ext for prefix/suffix matching within a segment. - Type-Safe Navigation & Parsing: Navigate with the params prop or useNavigate, read params via useParams, and transform values with params.parse/stringify. - Use Case: Build an internationalized blog where /posts/{-$category}/{-$slug} optionally filters by category, and /files/$ serves arbitrary nested file paths via _splat. ## Quick Start Add a dynamic postId route with a loader and a type-safe Link to it in my TanStack Router app.

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 create dynamic route segments in TanStack Router?▼

Prefix a segment with $ in the route path, such as createFileRoute('/posts/$postId'). The value is fully typed and accessible via Route.useParams() or the loader's params argument without any type annotations.

How to pass path params to a Link in TanStack Router?▼

Pass params through the params prop: <Link to="/posts/$postId" params={{ postId }}>. Never interpolate values into the to string, since that breaks type safety and param encoding.

Does TanStack Router support catch-all or splat routes?▼

Yes, a route ending in a bare $ captures everything after it, exposed under the _splat key. The older * syntax works in v1 for backwards compatibility but will be removed in v2.

Can TanStack Router path params be optional?▼

Yes, use the {-$paramName} syntax so the segment may be absent, in which case the param is undefined. This is commonly used for i18n locale prefixes like /{-$locale}/about.

Why are my TanStack Router params always strings?▼

Path params are always parsed as strings by default. Convert them with parseInt in the loader, or define params.parse and params.stringify on the route for bidirectional typed transformation.