A router for apps that got serious.
Cookbook Router turns routes into knowledge for links, navigation, params, search, middleware, layouts, validation, testing, and SSR.
One source
One route. One truth.
Matching, links, URL state, middleware, rendering, tests, and SSR all answer to the same route contract.
End-to-end typing
{id:int} means number. Everywhere.
Params, search, and hash are inferred from the route contract. Wrong values fail in links and navigation before the app runs.
Build integration
Fits your build.
Generate and validate route artifacts during development and production builds.
Vite · Webpack · Rspack · Rollup · esbuild · Bun
The actual problem
A production route is a path, a parser, an access rule, a navigation target, a layout decision, a test fixture, and an SSR concern. Spread that knowledge across the app and flexibility becomes maintenance. Five places to update. Six ways to be wrong.
Understand the route modelRefactor without archaeology
Stop copying paths into links, redirects, middleware, tests, and components. Navigate through a contract instead of hunting strings across the repository.
Explore typed contractsValidate before rendering
Params, search values, and hash state are parsed against the route definition before application code depends on them.
Explore URL statePut policy where it belongs
Middleware can redirect, rewrite, cancel, or return a response before navigation commits. No access-control effects pretending to be architecture.
Explore middlewareModel the real interface
Represent shells, sidebars, modal routes, previews, and split views in the route tree instead of rebuilding routing behavior around it.
Explore routed layoutsOne declaration. Several guarantees.
The route tree is not a list of screens. It is the contract shared by runtime navigation, React rendering, generated types, tests, builds, and the server.
routes.ts
import { defineRoutes, lazyRouteView } from '@cookbook/router';const UserPage = lazyRouteView(()=> import("./pages/user-page.tsx"));export const routes = defineRoutes([ { id: 'root', path: '/', layout: { view: AppShell, }, children: [ { id: 'users.show', path: 'users/{id:int}', search: { tab: { type: 'enum', values: ['profile', 'settings'], default: 'profile', }, }, middleware: [requireAuth], view: UserPage, meta: { title: 'User', requiresAuth: true, }, }, ], },] as const);user-page.tsx
import { Link, useParams, useSearchParams } from '@cookbook/router-react';export function UserLink() { return ( <Link to="users.show" params={{ id: 42 }} search={{ tab: 'settings' }} prefetch="mount" > Open settings </Link> );}export function UserPage() { const params = useParams('users.show'); const search = useSearchParams('users.show'); // params.id: number // search.tab: 'profile' | 'settings'}Route ID
users.show
Path param
id: number
Search state
profile | settings
Policy
requireAuth
Live demo
Open the demo and move through the parts routers usually flatten: shell layouts, modal routes, search params, auth redirects, lazy loading, error fallbacks, prefetching, and dirty-form blockers. The route contract is not sitting in a README. It is driving the app.
Built for application routing
The happy path is easy in every router. Cookbook Router focuses on what happens after the application grows teeth.
Declare URL state beside the route and consume parsed values instead of raw strings.
Handle authorization, analytics, redirects, rewrites, cancellation, audit trails, and navigation policy.
Build nested application shells and named routed surfaces without turning layout structure into hidden component state.
Open route-driven modals, previews, and split views while preserving a navigable destination.
Preload route data and modules intentionally, then integrate lazy route views with React.
Use static routing, serialization, hydration checks, and the same route contracts on the server and client.
Reject duplicate IDs, invalid route structures, malformed redirects, missing params, and unsafe generated output.
Generate TypeScript contracts, declarations, manifests, and composable route modules from static route definitions.
The package model
The routing engine is framework-agnostic. React integration is a separate layer. Generation and build integration stay outside the runtime package.
Core
The framework-agnostic engine for route definitions, matching, URL contracts, middleware, lifecycle, histories, rendering traversal, validation, and SSR.
Open API reference
React
Providers, links, navigation hooks, outlets, slots, intercept rendering, blockers, lazy views, and static rendering integration.
Open API reference
CLI
Generate route contracts, manifests, declarations, and route modules. Validate the route tree in development, builds, and CI.
Open API reference
Generation where builds happen
Plugins that runs the same generation and validation pipeline during development and production builds, so invalid routes fail early and generated artifacts stay in sync.
Choose a bundler pluginPick your entry point
Build
Install the packages, declare the first route tree, create the router, and render it.
Open the quick start
Understand
Follow the route from declaration through matching, URL state, middleware, rendering, and hydration.
Read framework concepts
Reference
Inspect signatures, options, return values, overloads, failure behavior, and package boundaries.
Browse the API
Ship
Start from recipes for authentication, typed links, modal routes, SSR, search filters, tests, and CI validation.
Browse recipes
Stop routing by guesswork
Start with the core. Add React when you render with React. Add generation when you want typed route IDs, params, search, hash, autocomplete, and build-time validation.