Recipes Overview
Production patterns for core router primitives, React applications, URL state, rendering, testing, SSR, and build-time generation.
Pick a problem, not a feature
Recipes start from application work. Each one shows the route declaration, runtime integration, and the failure mode that usually arrives five minutes after the happy-path demo.
Core Router recipes
Core Router recipes use @cookbook/router directly. They show how to build links, render route matches, place layouts and slots, handle intercepts, read metadata, and test router state from the runtime primitives.
Links and navigation
Build hrefs, active state, preloads, and navigation actions from route IDs.
Rendering adapter
Convert opaque route views into renderer output with renderRouteMatch().
Layouts
Render persistent layout shells with context.outlet.
Slots
Render named layout regions with context.slots and renderSlot().
Intercepts
Commit the destination URL and render through a source-owned slot.
Route metadata
Read, chain, and merge metadata from normalized routes and active matches.
Application and production recipes
React application recipes use the official React integration. Runtime and production recipes cover URL state, generated route files, tests, SSR, hydration, and build tooling.
Protected routes
Route metadata plus middleware from first resolution.
Typed links
Route IDs, params, search, hash, and generated contracts.
URL-backed filters
Make filters shareable without making the URL unreadable.
Lazy routes and prefetch
Warm modules without pretending the router owns your cache.
Memory-router tests
Assert router state directly with createMemoryRouter().
Static request handling
Resolve one request, render once, and serialize router state.