
TanStack Router Has a Free API That Makes React Routing Type-Safe
TanStack Router is the first fully type-safe router for React. Search params, path params, loaders — everything is typed end-to-end. Type-Safe Route Tree import { createRootRoute , createRoute , createRouter } from " @tanstack/react-router " ; const rootRoute = createRootRoute ({ component : RootLayout }); const indexRoute = createRoute ({ getParentRoute : () => rootRoute , path : " / " , component : HomePage , }); const productRoute = createRoute ({ getParentRoute : () => rootRoute , path : " /products/$productId " , // Loader runs before render — type-safe! loader : async ({ params }) => { return fetchProduct ( params . productId ); // params.productId is typed as string }, component : ProductPage , }); function ProductPage () { const { productId } = productRoute . useParams (); // Typed! const product = productRoute . useLoaderData (); // Typed! return < div > { product . title } < /div> ; } Type-Safe Search Params import { z } from " zod " ; const productsRoute = createRoute ({ get
Continue reading on Dev.to React
Opens in a new tab



