skills.rest
lespaceman
lespacemanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

router-core/path-params

Capture and manage dynamic URL segments in TanStack Router routes.

4|1|Updated Feb 3, 2026
Search Tags:#routing#tanstack-router#dynamic-urls#path-params#useparams#optional-params
One-click install
npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill router-core-path-params-lespaceman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/path-params
Source: https://github.com/lespaceman/athena-workflow-marketplace/tree/main/plugins/tanstack-start/skills/upstream/%40tanstack/router-core/skills/router-core/path-params
Command: npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill router-core-path-params-lespaceman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dynamic path parameters let you define routes with variable segments and access their values at runtime, enabling flexible routing patterns.

Core Features & Use Cases

  • Basic dynamic segments capture values with $paramName.
  • Splat routes collect trailing path segments into _splat.
  • Optional params handle missing segments with undefined values.
  • Prefix/suffix patterns support segments like post-{$postId} and {-$param}.
  • Accessors like Route.useParams and useParams read values in components or loaders.

Quick Start

Create a route with a path like '/posts/$postId' and read the param value in your component using Route.useParams().

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 in TanStack Router?▼

Capture dynamic URL segments in TanStack Router by defining routes with $paramName patterns, then reading the values at runtime using Route.useParams() in your components or loaders.

How does useParams work with optional path params in TanStack Router?▼

Optional path params in TanStack Router use the {-$param} pattern to handle missing segments, returning undefined values that you can safely manage using useParams or Route.useParams accessors.

What is the best way to handle splat routes in TanStack Router?▼

Handle splat routes in TanStack Router by using the _splat pattern to collect trailing path segments, allowing flexible route matching for dynamic nested URLs.

Can I use prefix or suffix patterns with dynamic path parameters in TanStack Router?▼

TanStack Router supports prefix and suffix patterns for dynamic path parameters, enabling custom segments like post-{$postId} to capture specific URL structures securely.

Does TanStack Router path params support i18n routing patterns?▼

TanStack Router path params support i18n patterns, allowing you to define and consume localized dynamic URL segments seamlessly within your route files.

Related Skills

Explore More Software Engineering Skills→
ravnhqravnhq
16

tech-tanstack-router

Define type-safe routes, layouts, loaders, and actions for TanStack Router in React applications.

Official
Basic
wsimmondswsimmonds
109

nextjs-dynamic-routes-params

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

Community
Basic
oriolriusoriolrius
17

TanStack Router

Implement type-safe file-based routing with TanStack Router in React applications.

Community
Advanced
drunkcodingdrunkcoding
4

add-sgl-kernel

Integrate AOT CUDA/C++ kernels into sgl-kernel with CMake and tests.

Community
Advanced