skills.rest
hashintel
hashintelOFFICIAL
Explore all skills by this author →
Website𝕏@hashaiGitHub

router-core-path-params

Define dynamic URL routes with `$` parameters and extract values in React components.

7|Updated Mar 16, 2026
Search Tags:#routing#navigation#react-router#url-parameters#dynamic paths#splat routes
One-click install
npx skills add https://github.com/hashintel/brunch --skill router-core-path-params-hashintel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core-path-params
Source: https://github.com/hashintel/brunch/tree/main/.agents/skills/router-core-path-params
Command: npx skills add https://github.com/hashintel/brunch --skill router-core-path-params-hashintel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of capturing and managing dynamic URL segments in web applications to facilitate flexible route matching and parameter extraction.

Core Features & Use Cases

  • Dynamic Path Segments: Defines routes with parameterized segments, such as $paramName, for flexible URL structures.
  • Splat / Catch-All Routes: Implements broad matching using $ to capture entire sub-paths, useful for file browsing or fallback routes.
  • Optional Params: Supports segments that may or may not be present, enabling versatile route definitions.
  • Prefix and Suffix Patterns: Allows combining static text with dynamic parameters within a single path segment.
  • Use Case: Create a route that captures user IDs in URLs like /users/user-123.json for personalized content rendering.
  • Navigation & Parameter Reading: Supports programmatic link creation and context-aware parameter extraction for seamless user experience.

Quick Start

Use this Skill to define routes with $ parameters and extract values inside React components.

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 extract dynamic URL parameters in React Router for personalized content rendering?▼

Dynamic path segments use parameterized names like `$paramName` to capture specific URL values, while splat routes use `$` to capture entire sub-paths, making splat matching ideal for broad file browsing or fallback navigation.

How do I implement catch-all routes for fallback navigation in a single-page application?▼

Splat routes use the `$` pattern to capture entire remaining URL sub-paths, making them ideal for broad file browsing or fallback route matching in single-page applications.

Can I combine static text with dynamic path parameters within a single URL segment?▼

Prefix and suffix patterns allow combining static text with dynamic parameters within a single URL segment, enabling precise matches for complex URL structures like `/users/user-123.json`.

How do I handle optional URL parameters in dynamic routing?▼

Optional URL parameters are supported by defining route segments that may or may not be present, enabling versatile route definitions for flexible navigation and resource identification.

Why does my dynamic URL pattern matching fail with injection errors?▼

Dynamic URL pattern matching fails with injection errors when parameter encoding and route definition best practices are not enforced. This Skill ensures robust and safe URL handling to prevent injection vulnerabilities.

Related Skills

Explore More Software Engineering Skills→
sprillionsprillion

script-execute

Compile and execute C# code at runtime using Roslyn.

Community
Intermediate
Vortex4047Vortex4047

frontend-security-coder

Implement XSS defenses with sanitization, encoding, and CSP directives in React frontends.

Community
Advanced
pproencapproenca
193

nuqs

Manage type-safe URL query state in Next.js applications with hooks and server utilities.

Community
Intermediate
pyzepyze

reitit-routing

Configure server and client routing with Reitit in Clojure.

Official
Intermediate