Documents client-side React hooks for navigation, loaders, and state in @rangojs/router.
npx skills add https://github.com/rangojs/rango --skill hooks-rangojs
Please help me install this Agent Skill. Skill: hooks Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/hooks Command: npx skills add https://github.com/rangojs/rango --skill hooks-rangojs
useParams, usePathname, useSearchParams, useNavigation, useRouter, useSegments, and useLinkStatus expose the current location and stable router actions like push, replace, refresh, and prefetch. - Loader data hooks: useLoader and useFetchLoader consume server loader data with streaming, Suspense integration, keyed refetch scoping, and cross-loader refresh groups via useRefreshLoaders. - State and outlet APIs: useLocationState reads typed persistent or flash history state, useHandle accumulates route handle data, useAction tracks server action invocations, and Outlet/useOutlet render child content in layouts. - Use Case: A client component on a product page needs the productId param, the loader's price data, and a pending spinner during navigation — the decision table maps each need to the exact hook and its companion reference file. ## Quick Start Ask the assistant which Rango client hook to use for reading a route param or loader data in a client component and show a typed example.High-intent search queries and answers about installing and using this skill.
Use useParams() from @rangojs/router/client to get merged params from all matched route segments as a readonly map. You can annotate the shape with a generic like useParams<{ productId: string }>() or pass a selector to re-render only when one value changes.
Use useLoader(LoaderDef) for loaders registered on the route; it suspends until streamed data lands and returns guaranteed data. Use useFetchLoader for on-demand fetching with load(), which supports params, JSON or FormData bodies, and keyed refetch scoping.
useLoader is strict: data is guaranteed once the read returns and the first read suspends until the loader streams in. useFetchLoader is flexible: data may be undefined until you call load() on demand, and unregistered loaders keep per-component results.
Yes. Pass { revalidate: false } to setSearchParams, router.push, router.replace, or a Link to update the URL and re-render hooks without an RSC server fetch. It only applies when the pathname stays the same; pathname changes always trigger a full navigation.
Loaders stream with the RSC payload, so a first read whose data has not arrived suspends to the nearest Suspense boundary or the route's loading() fallback. The isLoading flag only covers later refetches via load(), key refreshes, or group refreshes.
Do not use client hooks to fetch data; data fetching belongs in server-side loaders created with createLoader. Client hooks like useLoader only consume what a loader resolved, and controlling when a loader re-runs after an action is done with revalidate() in the server DSL.
lespacemanCapture and manage dynamic URL segments in TanStack Router routes.
moughamirApply Next.js 16 App Router caching, streaming, and routing patterns.
matthewharwoodGenerate file-based TanStack Router routes with Zod-validated params and routeTree.gen.ts.
TanStackImplement and debug TanStack Start React Server Components with Router and Query caching.