TanStack Router: Beyond the Basics

Hi everyone. Today I'm here to talk about routing, more precisely 10-Stack Router. But first, I want to congratulate this amazing organization for making this conference happen and for letting me be a part of it. I'm really happy to be here talking to you today.

Okay, so who am I? My name is Joana Santos. I'm a Fullstack Product Engineer at Synvertec 6. I'm from Viseu, Portugal, and my handle is joanamcsa everywhere. I have three years of experience with marketplaces, AI, internal developer portals, and so on. And if you want to give me feedback, chat about 10-Stack Router or technology in general, feel free to do so.

Okay, so today's road trip. Here's our route for today. We'll start by seeing how routing is in today's React apps. Then we'll see why someone should consider 10-Stack Router. Then how we can get started. Then we'll go through dynamic routing and type-safe parameters. How we can mask our location. And finally, data loading and prefetching it like a boss. Let's hit the road, shall we?

Okay, so routing in modern React apps. Let's talk about something we all use, but secretly dread, routing. We've all been there. You set up React Router, everything's fine until it isn't. Then one day you're trying to handle nested layouts, data fetching, outguards, and dynamic URLs, and suddenly it feels like you're playing Django with your app's navigation. Why does routing feel like it should be easy but somehow becomes a spaghetti junction of routes, outlets, and... Wait, where is this redirect even going? That's where 10-Stack Router steps in like the cool, organized roommate who labels everything in the fridge. Let's see why.

Okay, because it's type-safe, yes, even for URLs. It's modular and nested by design. Has built-in data loading and prefetching. Plus, it actually makes routing feel modern again. You might know the 10-Stack folks from React Query or 10-Stack Query, so you know they care about data and developer experience. And compared to React Router DOM, it's less component soup and more data-first, layout-aware architecture.

Okay, so how can we get started? Well, like in almost every package that we have here, we start by installing the dependency. So first, we do that magic command, and then we'll start by instantiating our router and declaring the module so TypeScript knows where to look into our router. Then we'll wrap our app in the router provider, and we pass the router.

Okay, so how can we use this? We'll start by seeing nested routes and parameters, and this is where 10-Stack Router shines because things are getting dynamic. You can nest routes for layouts that compose like lego bricks. You create the file with your route, and suddenly TypeScript knows exactly that the route exists, and it also creates the code for you. So if you have the server running and you create the file routes-cities-index.tsx, this is the code that you get automatically generated. It's pretty cool because if I try to write cities with an S instead of a C, for example, TypeScript will give me an error because it doesn't match with the file name.

Okay, that seems pretty simple. But what if I want to have a dynamic URL? Okay, so instead of routes-cities-index, now we create a file that's routes-cities-$cid.tsx. The $ will tell the TypeScript and tell the 10-Stack Router that it's dynamic, so it will create a dynamic route. And then on the component, we can access the $cid through the use-params hook. And this is pretty cool because it's also type-safe. If we write $cid with a capital D instead of with a lower D, the TypeScript will give us an error.

Okay, but that seems pretty simple. What if I want to add some search parameters? Okay, let's go back a little bit to our routes-cities-index.tsx. And here, let's say that it's a list of cities and you want to paginate it, filter it, and so on. How can we do it? Okay, we have a validate-search, and here I'm using the Zod schema, but you can use any schema that you – any package, any validator that you like. And here I'm saying that the page must be a number, and if it doesn't exist or if it's not a number, it will catch to the number 1.

Okay, cool, but how can we use this in the component? If you guessed through a nook, you guessed it right, because the 10-sec router also gives us a hook that is the use-search, that we can access everything that's in the search parameters. And in this case, it's the page. I must say that this is pretty cool, because we don't need anymore the use states to control the parameters, and then we have a use-effect saying that every time the parameters change, we change it in URL, everything is integrated and everything feels awesome. Don't you love it? I do.

Okay, but what if we want to add some authentication? What if not every page is supposed to be seen by everybody? Well, let's go back a little bit to our base file, and in this case, we will have the beforeload option, and here I'm doing a request to the server, and in this case, I'm using TRPC, but we could be using a access or fetch request, and if the CD doesn't exist, or it doesn't have the necessary rules for this page, then we throw a redirect to the home page. Here we can do, if the user isn't authenticated, and that all stuff, and this happens before the page is being served to the client, which means it doesn't flash the CD's page, the list of CD's page, and then we'll go through directly to the home page, it doesn't flash anything, which leads to a better user experience.

Okay, now let's talk about the side life of HANA Montana. What if I want to make the user be in one page but seeing another? How can we do that? Okay, so this link component is also from TimeStack Router, and we can say that it goes to the slash mask page, but actually what the user sees is that it's going to the slash CD's page, which I think is pretty cool, and it can become handy when you're opening models and stuff, but you don't want to show the user that it's a different page. And isn't this pure magic?

Okay, now smart data fetching. Now data. This is where TimeStack DNA really kicks in. Each route can have its loader, and here I'm using the loader dependencies to pass the page, so if we needed the page to get our first CD, we could use it in the request. And before rendering my page, I'm doing a request to the server in the loader, again through the IRPC and returning that same result and its search parameters. In order to use the search parameters in the loader, we have to return the loader dependencies in the loader dependencies option. And how can we do this, and how can we use this in the component? Again, with a hook, with the use loader data. And here you get directly the CD, which is loaded already, and guess what? This is also typed with the part before, and we can use the information to our will. And if this wasn't enough, we can also defer data.