skills.rest
Albo-Club
Albo-ClubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

path-params

Implements dynamic URL path parameters in TanStack Router file-based routes.

Updated May 26, 2026
Search Tags:#typescript#react#dynamic routes#file-based routing#tanstack router#splat routes#path params
One-click install
npx skills add https://github.com/Albo-Club/albo-os --skill path-params-albo-club
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: path-params
Source: https://github.com/Albo-Club/albo-os/tree/main/.agents/skills/tanstack-router-core/path-params
Command: npx skills add https://github.com/Albo-Club/albo-os --skill path-params-albo-club

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 routing. This Skill provides the correct patterns for every path param variant so routes are typed and navigation stays safe. ## Core Features & Use Cases - Dynamic Segments & Splat Routes: Capture named segments with $paramName and catch-all paths with $ exposed as _splat. - Optional & Prefix/Suffix Params: Use {-$paramName} for optional segments (e.g., i18n locales) and {$param}.ext patterns for prefixed or suffixed segments. - Typed Navigation & Parsing: Navigate with the params prop instead of string interpolation, read params via useParams, and transform types with params.parse/stringify. - Use Case: Build a localized blog where /posts/{-$category}/{-$slug} optionally filters by category, and /files/$ serves arbitrary nested file paths. ## Quick Start Add a dynamic post route with a $postId path param and a typed Link that navigates to it using the params prop.

Frequently Asked Questions about path-params

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

FAQPage Schema
How do I create dynamic route params in TanStack Router?▼

Prefix a segment with $ in the file name, like src/routes/posts.$postId.tsx, and define it with createFileRoute('/posts/$postId'). Read the value with Route.useParams() or in the loader via the params argument; types are fully inferred.

How to make optional path parameters in TanStack Router?▼

Use the {-$paramName} syntax, for example /posts/{-$category}. The segment may be absent, in which case the param is undefined. This pattern also works for i18n locale prefixes like /{-$locale}/about.

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

Yes, end a route path with a bare $ to capture everything after it, exposed under the _splat key. The older * syntax works in v1 for backwards compatibility but will be removed in v2, so use $ and _splat.

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

String interpolation like to={`/posts/${postId}`} breaks type safety and param encoding in TanStack Router. Always pass values through the params prop: <Link to="/posts/$postId" params={{ postId }}>.

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

Path params are always strings by default. Use params.parse and params.stringify on the route to transform them bidirectionally, for example parsing postId with parseInt so loaders receive a number.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

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

Official
Intermediate
guillempucheguillempuche

router-core/path-params

Capture dynamic URL segments into named variables for TanStack Router routes.

Community
Intermediate
TierOne-StudioTierOne-Studio
1

react-routing

Implements guarded, code-split React Router 7 routes with permission checks and URL-driven state.

Official
Intermediate
abereghiciabereghici

lifecycle/migrate-from-react-router

Migrate React Router v7 projects to TanStack Router route definitions and navigation APIs.

Community
Intermediate