skills.rest
guillempuche
guillempucheCOMMUNITY
Explore all skills by this author →
GitHub

router-core/path-params

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

Updated Aug 27, 2026
Search Tags:#react#tanstack-router#dynamic-routing#path-params#optional-params#splat-routes
One-click install
npx skills add https://github.com/guillempuche/engranatge --skill router-core-path-params-guillempuche
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/path-params
Source: https://github.com/guillempuche/engranatge/tree/main/docs/repos/tanstack-router/packages/router-core/skills/router-core/path-params
Command: npx skills add https://github.com/guillempuche/engranatge --skill router-core-path-params-guillempuche

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dynamic web applications often need to capture parts of the URL as variables, but managing these patterns can be error‑prone and verbose.

Core Features & Use Cases

  • Define routes with $ prefixed segments to capture single dynamic values.
  • Use $ alone for splat (catch‑all) routes that store the remainder of the path.
  • Declare optional parameters with {-$param} syntax for routes that may or may not include a segment.
  • Apply prefix or suffix patterns using {} around $param to embed static text before or after the variable.
  • Access captured values via the useParams hook inside component code or loader functions.
  • Configure allowed characters and custom parsing for advanced scenarios.

Quick Start

Create a route file named posts/$postId.tsx, read the postId parameter with the useParams hook, and display the post title on the page.

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 capture dynamic URL segments for routing in React with TanStack Router?▼

You capture dynamic URL segments in TanStack Router by defining route files with a $ prefix, such as posts/$postId.tsx, which extracts path values into named variables for your React components.

How do I set up optional path params and splat routes in TanStack Router?▼

Set up optional params in TanStack Router using the {-$param} syntax for conditional segments, or use $ alone to create splat routes that catch and store the remainder of the URL path.

How do I access captured path params inside my React components and loaders?▼

Access captured path params inside React components and loader functions by calling the useParams hook, which provides type-inferred values extracted from your defined dynamic route segments.

Can I add custom parsing and configure allowed characters for dynamic routes?▼

You can configure allowed characters and apply custom parsing for dynamic routes to handle advanced scenarios where default URL segment extraction needs specific validation or data transformation.

Does TanStack Router support prefix or suffix patterns around dynamic path params?▼

TanStack Router supports prefix and suffix patterns around dynamic path params by placing the $param variable inside curly braces, allowing you to embed static text before or after the captured variable.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

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

Official
Intermediate
RajAryanIITBHURajAryanIITBHU

clerk-tanstack-patterns

Protect TanStack React Start routes and server functions with Clerk authentication.

Community
Intermediate
wsimmondswsimmonds
109

nextjs-dynamic-routes-params

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

Community
Basic
dennislee928dennislee928
54

TanStack Router

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

Community
Advanced