[00:00] 10-Stack Router is a modern routing solution that introduces lots of improvements as compared to existing routing solutions. So why would you even consider to replace or just take a look at how does it differ from what you have right now? So the first and most important feature, at least for me, is type safety. Full type safety when it comes to creating links using the navigate function or navlink components, redirects and so on and so forth. So all in all, in TANSTACK Router, there is an automatic generator of the root definition that is working behind the scenes.
[00:38] So it basically scans your files and it's going to generate what are the roots, what are the parameters that are related to them etc. So essentially whenever you create a link or whatever this is going to be type safe so there is essentially no way to introduce a typo error or anything like this So let's see how this looked like in older solutions such as React Router. So let's say that we have a component and inside this component we need to use a ID parameter inside the root and using this ID parameter We're just going to use this fetch stuff function, which is going to run for instance some HTTP request So what we could do for instance would be to use the use params Hook and let's say that I want just to use what use params is now use params tells me is that there might be some string params. So now I'm not using the type parameter over here in this call. So what could I do?
[01:43] I could just run params and let's just put ID. So what is ID? Well, it could be a string, but it doesn't have to be. That's the thing that existing routing solutions are not type safe. So let's also try to use the use params along with this type parameter being explicitly defined.
[02:02] So let's say that I'm expecting that there would be an employee ID root parameter over here and I'm expecting this employee ID to be here. Now the problem is that I cannot just use the FetchStuff function using the employee ID since this one could exist, but I'm not guaranteed that it does exist. So I need to choose how would I deal with that situation? One solution is to use the not null assertion, the exclamation mark, but it doesn't seem to be the perfect solution. Another solution is that I could basically make a conditional throw error so that whenever I'm trying to use this component in a root that does not guarantee that employee ID root parameter is there I would basically throw some error like you gotta put that component under whatever the root is, let's say ID, right?
[03:06] And if I don't do it, then I would make a check. But on the other hand, why should it be my responsibility to do it? So now It works correctly, because if I happen to move outside of the if statement, past the if statement, then it's guaranteed to be here. This is essentially an inline assertion function on TypeScript level. But still, This is not a perfect solution.
[03:31] This is not a perfect solution either. So yeah, this is the thing that TastakRouter solves. Again, if I wanted to use let's say a NavLink component So I'm using a NavLink over here and let's say that I would define that, what is this thing? So essentially a root that does not exist at all. So it doesn't exist.
[03:57] The problem that we've got over here is that there is essentially no way for existing router solutions to figure out that, hey, like how could I even make this type safe? So this is the most important problem that test accrued or solves, but it's not only about type safety. So another thing is data loading. So in many situations, we need to perform the data loading on our component level. So being responsible for data loading and somehow the responsibility of the component.
[04:31] And quite often we could basically move this into the routing layer. So it's the routing that basically takes care of what should be loaded and now there is a caching on exactly this level so that again we can make our components even smaller because they have less responsibility. Another feature is render optimizations. So all in all we don't need to care that much about the references, the referential equality and so on and so forth, because same as TanStackQuery, TanStackRouter is using structural sharing. So all in all, there is less responsibility on ourselves to in doing the low level optimizations.
[05:15] Last but not least, there is also the DevTools that are provided within Tanstack Router. So essentially, a very similar solution to Tanstack Query DevTools. We just need to put a Tanstack Router DevTools that is of course automatically available within the scaffolding or in like automatic solutions whenever we install TANStack Router. However, what we've got is a box over here that when we open we can see what is the state of the router but also as we are moving across the routes we can see how do all of these routes actually match, what is being cached, what is the stale time, GC time, like what are the matches and lots and lots and lots of other features. So these are the reasons that you might be interested in giving TANstackRouter a try.
