
TanStack Router Has a Free API You're Not Using
TanStack Router is the fully type-safe React router that makes React Router look like it's from 2015. Search params, loaders, and route context — all with full TypeScript inference. The Free APIs You're Missing 1. Type-Safe Search Params — No More useSearchParams import { createFileRoute } from " @tanstack/react-router " ; import { z } from " zod " ; export const Route = createFileRoute ( " /products " )( validateSearch : z . object ({ page : z . number (). default ( 1 ), sort : z . enum ([ " price " , " name " , " date " ]). default ( " date " ), category : z . string (). optional (), minPrice : z . number (). optional (), }), }); // In component — fully typed! function ProductsPage () { const { page , sort , category } = Route . useSearch (); const navigate = Route . useNavigate (); return ( < button onClick = {() => navigate ({ search : { page : page + 1 } })} > Next Page < /button > ); } 2. Route Loaders — Data Fetching Before Render export const Route = createFileRoute ( " /users/
Continue reading on Dev.to React
Opens in a new tab

