[00:00] Tanstack router is going to actively watch what files we do have here inside the roots directory and it's going to provide these definitions of what are the roots that we define over here, what are the IDs, what are the paths, etc. And basing on this information it's going to update what is the module definition for a TypeScript module over here. So essentially there is some definition within the node modules deep down and it's being just extended locally inside our application with what are simply the file routes by path. Thanks to this whenever we are going to use a redirect using navigate to and other features of routing this is going to be type safe thanks to the fact that this file is being automatically regenerated. So having said that let's also take a look at the root route which essentially is a create root root which has a component root component and now we just see what is basically going to be displayed at each page of our application.
[01:12] So essentially we have some navigation At the top there is a horizontal rule, there is the outlet, so here we're going to put all the content of the child routes and finally the 10-stack router dev tools. Now this one is going to be displayed always. Now if we walk into the index subpage or the index root, now this home component is going to be matched against this root over here. So this content is going to be put into the outlet. Or if we walk into the about root, this content is going to be again put into the outlet.
[01:53] Now if you take a look here, we've got the create file root, which is essentially the slash, and Here there is a create file root which is essentially the slash about. If we now go back to the rootgen file over here, then we will see that yes, this pretty much matches everything that we have in our files. So let's now go back to the package.json and we're going to run npm run dev. So let me run npm run dev. So our application is open at localhost 3002 And we can see that the home component has been matched against the slash root.
[02:37] So here we've got the index root over here. And if you walk into the about, we will have the about which is matched against the slash about. Here we can also see if we again go back into the root TSX, we will see that there is the tanstack-router-devtools, which here was chosen by default that it should be on the position bottom right. Here we can see the tanstack-router-devtools saying what are the routes that are matched within what is being displayed right now but we're going to take a look at this later.
