TanStack Router Has a Free API You Should Know About

TanStack Router brings 100% type-safe routing to React. Its API for search params, loaders, and nested layouts is far more powerful than React Router. Type-Safe Route Definitions 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 ([ " name " , " price " , " date " ]). default ( " date " ), q : z . string (). optional () }), loaderDeps : ({ search }) => ({ page : search . page , sort : search . sort }), loader : async ({ deps }) => { return fetchProducts ({ page : deps . page , sort : deps . sort }) }, component : ProductsPage }) function ProductsPage () { const products = Route . useLoaderData () const search = Route . useSearch () const navigate = Route . useNavigate () return ( < div > < select value = { search . sort } onChange = {( e ) => navigate ({ search : { sort : e . target . value } })} > < option value