skills.rest
rangojs
rangojsOFFICIAL
Explore all skills by this author →
GitHub

route

Define type-safe URL routes with path() in the @rangojs/router React RSC framework.

Updated Nov 7, 2025
Search Tags:#routing#redirects#react server components#url parameters#search params#type-safe routes#rango
One-click install
npx skills add https://github.com/rangojs/rango --skill route-rangojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: route
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/route
Command: npx skills add https://github.com/rangojs/rango --skill route-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @rangojs/router.

What problem does it solve? Defining URL routes in a React Server Components app requires wiring paths, parameters, search schemas, redirects, and typed context together correctly. This Skill provides the patterns for declaring routes with path() in @rangojs/router so handlers, params, and navigation stay type-safe. ## Core Features & Use Cases - Route Definition: Declare static, parameterized, optional-parameter, and named catch-all routes with path() and named route registration. - Typed Search and Params: Attach search schemas for typed ctx.search, and use Handler, RouteParams, and RouteSearchParams generics for compile-time safety. - Redirects and Context Sharing: Issue redirects with status codes and location state, and share typed data between handlers and layouts via createVar and ctx.set/ctx.get. - Use Case: You need a product page at /product/:slug with a typed search schema, a loader, a loading skeleton, and a breadcrumb handle. This Skill shows the exact path() declaration with children and context access. ## Quick Start Ask the AI to create a new route at /product/:slug with a named route, typed search params, and a loader using @rangojs/router.

Frequently Asked Questions about route

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

FAQPage Schema
How do I define a route with URL parameters in @rangojs/router?▼

Use path() with a colon-prefixed segment like path("/product/:slug", handler, { name: "product" }). The parameter is available as ctx.params.slug inside the handler, and the name enables type-safe reverse() URL generation.

How do I add typed search params to a route in Rango?▼

Add a search schema to the route options, such as search: { q: "string", page: "number?" }. Then type the handler with Handler<"name"> so ctx.search resolves to the typed object, while ctx.searchParams remains a raw URLSearchParams.

Does @rangojs/router support catch-all route segments?▼

Yes, named catch-alls use :name+ for one-or-more segments and :name* for zero-or-more, and must be the last segment. The matched remainder is exposed as a single decoded string at ctx.params.<name> with internal slashes preserved.

Why is my redirect rendered into the RSC stream instead of an HTTP redirect?▼

An async handler returning redirect() on a route that also declares loading() is streamed, so the redirect becomes part of the RSC payload. For a real HTTP redirect, issue it from middleware or a synchronous handler return.

How do I share data between a route handler and its layouts in Rango?▼

Create a typed token with createVar<T>(), write it in the handler with ctx.set(Var, value), and read it in layouts or parallels with ctx.get(Var). Only handlers and middleware can set values; layouts and parallels can only read.

Related Skills

Explore More Software Engineering Skills→
tkgstratortkgstrator
1

tanstack-router

Generates file-based TanStack Router routes and typed parameters for Vite+React SPAs via the @tanstack/router-plugin.

Community
Intermediate
markus41markus41
1

nextjs

Build Next.js applications with App Router, Server Components, and API routes.

Community
Intermediate
salvo-rssalvo-rs
20

salvo-middleware

Implement cross-cutting middleware across Salvo routes and handlers with hoop() and FlowCtrl.

Official
Intermediate
cill-i-amcill-i-am

virtual-file-routes

Build programmatic route trees with TanStack Router helpers.

Community
Intermediate