🇵🇹 JNation 2025

TanStack Router: Beyond the Basics

Modern routing isn’t just about navigating between pages anymore—it’s about dynamic data loading, route transitions, and user experience. Join us as we uncover the superpowers of TanStack React Router. We’ll explore features that go beyond the basics, like nested routing, type-safe loaders, and prefetching strategies. Expect a fun ride with real-world examples, tips to optimize performance, and a live demo of building a mini-dashboard app that uses all the best features of TanStack Router.

Transcript

1. Beyond the basics TanStack React Router Joana Santos, 2025
2. Joana Santos Product Engineer @ synvert xgeeks @joanamcsa Viseu, Portugal 🇵🇹 @joanamcsa
3. Getting started Today’s Roadtrip Nested routes and parameters Smart Data Fetching Location Masking @joanamcsa 🐞 Routing in modern React apps Why TanStack Router?
4. Routing in modern React Apps @joanamcsa 🐞
5. Why TanStack Router? Modular and nested by design Type-safety Built-in data loading @joanamcsa 🐞
6. Getting started @joanamcsa 🐞
7. @joanamcsa 🐞 npm install @tanstack/react-router const router = createRouter({ routeTree }) declare module '@tanstack/react-router' { interface Register { router: typeof router } } <RouterProvider router={router} /> Getting started
8. Nested Routes and Parameters @joanamcsa 🐞
9. Nested Routes and Parameters @joanamcsa 🐞 export const Route = createFileRoute('/cities/')({ component: RouteComponent, }); function RouteComponent() { return <div>Hello "/cities/"!</div>; } routes/cities/index.tsx
10. Nested Routes and Parameters @joanamcsa 🐞 export const Route = createFileRoute('/cities/$cityId')({ component: RouteComponent, }); function RouteComponent() { const { cityId } = Route.useParams(); return <div>Hello "/cities/{cityId}"!</div>; } routes/cities/$cityId.tsx
11. Nested Routes and Parameters @joanamcsa 🐞 routes/cities/$cityId.tsx export const Route = createFileRoute('/cities/$cityId')({ component: RouteComponent, }); function RouteComponent() { const { cityID } = Route.useParams(); return <div>Hello "/cities/{cityId}"!</div>; }
12. Nested Routes and Parameters @joanamcsa 🐞 export const Route = createFileRoute('/cities/')({ component: RouteComponent, }); routes/cities/index.tsx
13. Nested Routes and Parameters @joanamcsa 🐞 const CitiesSearchSchema = z.object({ page: z.number().catch(1), }); export const Route = createFileRoute(‘/cities/')({ component: RouteComponent, validateSearch: CitiesSearchSchema, }); routes/cities/index.tsx
14. Nested Routes and Parameters @joanamcsa 🐞 const CitiesSearchSchema = z.object({ page: z.number().catch(1), }); export const Route = createFileRoute(‘/cities/')({ component: RouteComponent, validateSearch: CitiesSearchSchema, }); function RouteComponent() { const { page } = Route.useSearch(); return <div>Hello from page {page}</div> } routes/cities/index.tsx
15. Route Guards @joanamcsa 🐞
16. Route Guards @joanamcsa 🐞 export const Route = createFileRoute('/cities/')({ component: RouteComponent, }); routes/cities/index.tsx
17. Route Guards @joanamcsa 🐞 export const Route = createFileRoute(‘/cities/‘)({ component: RouteComponent, beforeLoad: async () => { const city = await trpc.cityRouter.getFirstCity.query(); if (!city) { throw redirect({ to: '/' }); } }, }); routes/cities/index.tsx
18. Location Masking @joanamcsa 🐞
19. Location Masking @joanamcsa 🐞 <Link to="/mask" className="[&.active]:font-bold" mask={{ to: '/cities', }} > Masked City </Link> routes/_root.tsx
20. Smart Data Fetching @joanamcsa 🐞
21. Smart Data Fetching @joanamcsa 🐞 export const Route = createFileRoute(‘/cities/')({ component: RouteComponent, validateSearch: CitiesSearchSchema, loaderDeps: ({ search }) => search, loader: async ({ deps }) => { const { page } = deps; const city = await trpc.cityRouter.getFirstCity.query(); return { page, city }; }, }); routes/cities/index.tsx
22. Smart Data Fetching @joanamcsa 🐞 function RouteComponent() { const { city } = Route.useLoaderData(); return ( <div> <h1 className="text-4xl">{city?.name} - first city</h1> </div> ); } routes/cities/index.tsx
23. Smart Data Fetching @joanamcsa 🐞 export const Route = createFileRoute(‘/cities/')({ component: RouteComponent, loader: async () => { const city = await trpc.cityRouter.getFirstCity.query(); const promiseCities = trpc.cityRouter.getAll.query(); return { city, promiseCities }; }, }); routes/cities/index.tsx
24. Smart Data Fetching @joanamcsa 🐞 function RouteComponent() { const { city, promiseCities } = Route.useLoaderData(); return ( <div className="p-2 flex flex-col gap-2"> <p>Our first city {city?.name}</p> <Await promise={promiseCities} fallback={<div>Loading...</div>}> {(data) => ( <div> This is the count of cities: {data.length} <ul> {data.map((city) => ( <li key={city.id}>{city.name}</li> ))} </ul> </div> )} </Await> </div> ); } routes/cities/index.tsx
25. Smart Data Fetching @joanamcsa 🐞 <Link to=“/cities" className="[&.active]:font-bold" preload="intent" > Cities </Link> routes/_root.tsx
26. Smart Data Fetching @joanamcsa 🐞 <Link to="/cities" className="[&.active]:font-bold" preload="intent" > Cities </Link> routes/_root.tsx
27. Recap @joanamcsa 🐞
28. @joanamcsa 🐞 Obrigada 💚