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.