Tanstack router is a gamecher for React developers. In this deep dive, Tapus will show you how to build a production ready application featuring robust data loaders, seamless search parameter filtering, and secure private routes. Whether you're comparing it to React Router DOM or Nex.js, you'll learn why Tanstack is becoming the industry standard for complex web apps. Hello, welcome to Tapascript and today we are going to learn about tanstack router. Consider this as a crash course and before even we get into what is available in this crash course. Let's see what we end up building by following different features use cases that tast router provides. The page you're seeing on your screen is an app I call it as meetup tracker. What it can do? It can track different meetups happening in the different geographic location. But apart from that, this website also provides a few static information in static pages. For example, you can go to the about page to know about the community. You can go to the hackathon page to know about hackathons. There is different hackathons happening. But look at the URL. The URL now changed from local 3000/activity/hackathon. And when I went to about page, it was changed to /about. You can go to external links as well. For example, you can go to a GitHub organizations to see what is happening over there. What are the different repositories are available or you can go to know more about the meetups. Here we get a completely different layout done where there is a subheading there are certain action items and there is a list of meetup that we get to see. We can get into one of the meetup which actually call at API to get the data and display the data in a form that user can understand most effectively. Did you notice the URL change over here? What happened? It become/activity/meup/tappascript the one at the end tapascript that changes dynamically for each of the meetup that I go and it is never hardcoded in anywhere in our application. is completely routerdriven and datadriven. You won't be noticing a single use state or the use effect in the code today because we are going to do something in most elegant most types of manner that you could have ever imagined. In many cases it happened that some portion of the application is not public and we make it private through authentication. For example, if someone wants to create a new meetup in the meetup dashboard, this may not be allowed for everyone other than the admin of this application. So if I straight away go and just do create, I will get a login page to authenticate and then only I'll be allowed to create. The message you see over here, you must be logged in to create a meetup. This is not random. This is also routerdriven. And once I log in with my email and password, now I'll be able to submit a new meeting. I can go ahead and click on submit new meetup. I get a new meetup added over here. I can go here and see the details of the new meetup. As you know the application that we are building. Let us quickly see the chapters that we are going to cover in this crash course. So what's our plan for today? The first thing we are going to do to learn about router. What is router and why it is required at all. Then we're going to talk about tanstack router because the crash course is all about the tenstack router. The next thing that we'll touch base about installation and the setup. Very important. After installation and setup is done, we're going to talk about a fundamental concept called route tree. Very important. And then we are going to talk about root route. And once you understand the root route, it will be very easy for you to configure different routing configuration. After that, we're going to talk about how to create a route using tan router. Then we're going to talk about navigation. Once you want to go from one page to another page or you want to click on a button want to go to another page how you can do all these things what are the different ways that you can accomplish and then we're going to talk about layouts and nested routes because most of the applications need dynamic behavior dynamic layouts and this is where we are going to cover this next one is about the dynamic routes this is where we are going to integrate our routing system with an API and we are going to fetch some data from say backend database. It could be DB or simple JSON data and we're going to fetch that and we're going to make our user interface responsive. Then we are going to talk about the loaders and data. What are the different ways that you can handle data and the data driven by the routing system? I was mentioning no use state, no use effect at all completely through router. And then we're going to talk about the search params and the state. What if you want to do certain kind of filtering done on your UI? Do you rely on again use effect do you rely on certain state within your component or you can do it much more effectively most most type safe manner using router we're going to learn that after that we're going to learn about something very fascinating thing called router context I'm also going to tell you when you should not use router context and when you should go for generic react context after that we'll be talking about protected routes the example I have shown and then we are going to talk about mutations and cash and finally I'm going to bring certain comparisons out. So that's what lot of things to do and if you are aware of certain things already you can just skip that and go to the one that you want to learn because for this video I have created the chapters in that way you can go to the description and click on any of the chapter you'll directly land to that section of the video all right so let's get started with the concept of why we need routers before we touch base the single line of tanstack router code we need to understand what is routing and why do we need routers the core routing represents the user's intent and the UI that we see or render on the browser. Take this case here is Lily who is browsing today and once Lily browse to a particular URL for example Lily is looking for mobile phones. Lily gets to a page that displays mobile phones. Now Lily goes back from mobile phones and wants to try out certain cats. So Lily changed the URL from phones to cats. And then once Lily visit that URL, Lily gets to see the cats. When she wanted phone, she got the phone. When she wanted cats, she got the cats. With a router, it becomes multi-page application. It has its own advantage because for multi-page applications, it creates specific URLs. For example, you are seeing app.com/it/phones or app.com/itm/cats which you can share with someone. That mechanism is also known as deep linking. It means in an application you can go to a corner of the application and associate that particular corner of the application with a specific URL and share that URL with anyone or bookmark that URL to revisit in the later point in time. Think of the router or the routing system of your applications like your mobile phone's GPS. It takes and tracks the URL. it parses it and from there it decides okay based on this information I should go to this particular path and then I should render this particular component. It could be a cat component, it could be a mobile component, it could be a profile component. So I hope it makes sense at a fundamental level what is routing and how routing helps in your application. There are multiple libraries available today to take care of routing depending on what kind of programming language depending on what kind of infrastructure of the ecosystem you're using. For example, if you're with React, with React, you can leverage routing using React router DOM. You can leverage routing using cast router, the one that we are going through today. Or if you are going to the framework like NexJS, it has this built-in app router. Now, you can leverage that as well. They all are fundamentally solving the same routing problem, but each of them are having their own way of doing things, own advantages, own disadvantages. Pamstack is an entire ecosystem. This is not just about the router. Tanstack is also having something called tanstack query which can help you to manage your server state with your client application without managing lot of state related items by yourself. Similarly, tanto router the one that we are talking about today is about the routing system and then tanstag is also having something called tanstack start which is the framework and the entire framework is built on tanag router and I'll be bringing tanstack start related content very soon but before that you need to understand tanstack router quite well to appreciate and use tan start very well. Now in Tanaka router there are plenty of features there are plenty of settings there are plenty of properties and methods that you can make use to make a robust routing system for your production grade application. It is very important to highlight certain differentiators or certain great things that tast router provides and why it's a clear win. The first thing is 100% inferred tribescript support. I think this is the best best best part for any routed system. When you are coding and let's say that your routing is slashabout and by mistake you misspelled it instead of say a b o u t you wrote it as a b o t. In many routing system you won't even know until this code is pushed to production. Somebody clicked on that link which says ab t instead of ab u t and it gives a 404 page not found because it's a misspelled route. If you had typed ab u t about it would have found the component for that about route but you type ab t there is no such route available and it gives 404 but you come to know this only after your application is deployed in production. How great it would have been. You come to know as soon as you do some spelling mistake while developing it. Your ID is intelligence alert you that boss there is a problem you are making. Make sure that you are typing the proper routing. What if it comes from the infrastructure itself you won't push that bad route by mistake to production. You have a great way of doing file system based routing. We declare things on the file system and it becomes your route. We're going to see that you have nested routing feature. very very easy way that you can actually set it up. The loaders is something amazing that how through routing you can manage and maintain the data loading. You're going to see a lot of stuff that listed out in this documentation. Among all this, the first thing that we're going to do is the setup. So, open your favorite editor. I'm going to use VS Code and we're going to get started with the task router setup. First, I've got my VS code open and I have created a folder called video tech. You can create any folder of your choice. And then I'm going to use something called tanstack cli. So the command that I'll be using is called npx at tanstack and I'll be using the command called create and then give your project name. My project name is meetup tracker because we know we are creating something called a meetup tracker. using the CLI I'm saying that I want to create only router related code scaffolding. So if I do router only I'm going to get only route code scaffolding the initial code on top of that I'm going to put my code to make all the feature alive. But first it's going to create a project called meetup tracker with all initial code for routing. But one more thing I want to call out over here. Some of you might use PNPM, some of you might use Y, different kind of package manager than npm itself. So for example, if you want to initiate this project with PNPM, if you don't want to use npm, you can give another switch called hyphen package manager and then space PPM. So in that case what will happen? The project infrastructure will be aware that it has to create everything using pmpp. If you don't give this, if you just omit it, it is going to use the default npm. Now, yes, proceed. Ta ecosystem supports react and solid jets. As we are doing react based, so I'm going to select react for the framework. What is a tool chain? I would always go for yes link to get the link errors. Would you like to initialize a new g repository for now? No. Now it is showing all the settings that I have selected. Let's go ahead and says yes it's installing the dependencies via npm. You're seeing had you selected package manager as pnpm it would have used pnpm to install and manage your dependencies. All right it's done. So if I go to my explorer I am able to see a project called meta tracker. If I just expand I can see a lot of files and folders have come and sit here. We are going to learn about each of them. Don't worry about that. But for now a tan router project has been created for us. As you can see a node_modules folder over here. So it means that it has already installed all the dependencies. If you go to package.json file, you will be able to see all those dependencies listed over here. You can clearly see tanstack router is installed over here. Next important thing that I want you to look into a special file called vit config.ts. Please open this up. So here the main thing to look into what are the different plugins the vit plugins that automatically configured for us. The first thing it has done is called dev tools. Tanstack come with something called a tanstack dev tools. Tanstag dev tools related items. everything everything possible to do with it that's the dev tools the remarkable tool is not in the scope of this particular crash course because it require a different crash course for that CSS and here the target you see is react because we had selected react not the solid JS ecosystem and auto course splitting says true we going to learn about it when we will learn about lazy loading and the last is the react support with the v react so this is one file you just learn it you probably never have to touch it but it's good to know what is there inside. Now before we look into any of the files, I'm going to go ahead and start running this project and see what exactly it look like. First let's go inside the project folder called meetup tracker. So I'm inside meetup tracker now. If you're using npm just do npm rundev. It will run it. If you're using pnpm pnpm rundev. If you're using yarn yarn dev it's running on the port 3000. So I'll go ahead and access local host 3000. The local host 3000 gives me a white color welcome saying welcome to test start. All right. So we are going to change everything. All the code that I'll be writing today will be in this organization called github.com/tapascript. Feel free to follow this organization because I keep pushing lot of useful repositories over here and going under repositories you will find something called cast router crash course. go over there and you will find elaborated documentation of how to access what and this is exactly what we are going to create right now and you will find the link to this particular repository in the description of this video. Go ahead and check it out. You get to see a bunch of folders and files. The most highlighted folder over here is this routes folder. Expand this routes folder and here you will find a very special file called_root. tsx this undersc root.tsx tsx file gives us the root route. When we're talking about root, aren't we talking about a tree? Because usually a tree has the root. Yes. So let's talk about the route tree. When you create routes in tanstack router, you create files and folders. Now those files and folders has to be translated to something that tanstack router can manage much more efficiently and types. There's a reason it creates a special file called routtry.gen. gen.ts. This file you don't create and you never ever touch this file. It's also written here. This file was automatically generated by DST router. You should not make any changes in this file. What this file keeps? This file keeps the entire tree hierarchy of your route. Let's take an example and understand. Here you see the similar kind of folder structure. At the left side you have this routes folder. inside that all our routes in taste router application and this routes will be defined by the folders and the files. So let's imagine I have a routes folder inside that I have a org folder inside that I have activities folder inside that I have meetups folder inside that I have bunch of files inside activities along with the meetups folder I have files hackathon post etc. The special file root.tsx tsx is here and at the same level we have few other files like about index logit etc. Now each of these file and folder got conventions and with that conventions tack router generates the route tree. The representation is what you see in that gen file we just now spoke about. The first thing is going to create a root and this root is represented by this_root.x what you are seeing over here. Now at this level whatever the file that you are creating inside the routes folder are going to create individual routes for it. For example, if you create a file called about.tsx inside the routes folder, it is going to create a new route called about. If you have an index.tsx file, it is going to create a / route for you. Now if you have a login.tsx, it is going to create a login route for you. So understood underscore root is the root route and under root route you have slash route /about route and / login the slash we also call it slash or/home kind of route right and this is created the slash is created by the index.tsx under routes folder the /about is created by about.tsx under routes folder the / login this particular route is created by the login.tsx tsx under routes folder make sense very clear now what happened under routes folder now I have a folder called og under og I don't have any other file I have another folder called activities inside activities I have bunch of files like hackathon tsx posttx etc so it means that under og I don't have any functional route created because under og I don't have any rout files created but under activities I have hackathon, I have post. So if you match it under this root now, I'll have ORG and then I'll have activities and under activities I'll have hackathon, I'll have post and I also have meetups. How? Because under activities I have create a meetups folder and inside meetups folder I have bunch of routes created. I have again a / route, I have a create route, I have something called dollar meetup id routes. Don't try to understand all these things right now. We will get to it eventually. But at this point, the fundamental that I want you to understand that as and when you create the folders and the files inside this routes folder, tan stack is going to translate them into a tree and a hierarchy so that they manages the type of each of the route, the data that you'll be passing between the routes and all kind of route management automatically for you. You don't have to break head for it. And this is how the representation of the route tree. Now if I come back to this route tree gen.ts this is the file we'll have all the routes and the hierarchy as and when we will create the route apart from these two I don't have any other those route nodes created in the route tree. So if I go to route tree.jen.ts I will just find them over here that right now only path is available is the slash. Look at this ID part. Right now I have underscore root and this slash. So as and when you create more routes you will see those routes keep appearing over here. Now let's talk about the root route. The root route is_root.tsx. I have opened this file. This is available under krc under routes folder. This is the file in your app called a very important API called create root route. You see over here called create root route to create a root route component. This works as a highle layout. It means whatever you want to retain throughout the pages statically. For example, a header, a nav bar, a sidebar or a footer. These are the things usually don't change from one page to another page. This is the place where you keep them. You keep the nar here. You keep the header here. You keep the sidebar here. You keep the footer here. Those things are going to be available across all the and the other important part you will see in this file is something called outlet. This also comes from tanstack react router. So what is outlet? Think of outlet like a dynamic slot. When you navigate to say / login the router look at the tree it sees that oh there is a login.tsx available and this is the child of the root. Let us now inject this login component exactly where this outlet is positioned. Similarly, if I go to a /about root and there is about.tsx. So whenever you go to /about, whatever the content of about.tsx, that will be injected wherever this output is there. So this outlet we can place based on where we want the dynamic content to be app. Okay. So now we know about this file. Now let's look into the definition of how do we create a route. the root route we get this API called create root route and using this we can create this route we keep calling it as a root route so it should have certain definition of the UI definition of it right that can be given using a component this this can be any react component and you can give any name in this case we have given root component inside this root component react component we just have this we have a outlet where dynamically we want other routes content to come and we have initialized something called Tanstag t tools this is a super duper tool tanstack gives us for debugging purpose so you will see that eventually that's all this particular file is having now when we go to local 3000 what do we see we see something called welcome tack star it is coming from somewhere right by the way what is the route now the route is slash if we don't give anything the route is slash and the slash route is determined by a special file called index.tsx tsx under routes folder. So under any route folder if you create an index.tsx it will be determined as the / route for that particular routing. So here for the root route if I create a index.tsx it means that it is the top level / route. If I go inside that now I will see this welcome to tan stack. This particular h1 is over here. Now how does this become a / route? For that purpose, we have an API called create file route. And with create file route, we put a definition that wherever the route is slash, please mount this component for home. And the home component is a simple react component which JS. And this particular / route contain will go and replace this outlet whenever we are going to access slash. Similarly, if I create another route called about route, let's create and about.tsx. This is our first route that we created. The moment I created about.tsx, the basic definition of this route is created by DAX router. See as you're seeing it imported this create file route. With create file route, it is doing a mapping of whenever you go to /about the component will be this out component. You can rename this to about component. And you can use about component over here. You can even take this to a different tsx file, import that and use the about component. So now we have a about component. If I go to UI and do /about, I'm saying hello/about. This hello/about is coming from here. So what happened in this case? Whenever I hit /about, my root routers outlet is got replaced with the content of this. Whenever I hit just slash my index.tsx which is the slash route this content replace this particular outlet that's what is happening and this tanstack dev tools you can see it over here. You can see it also when I go to about it available always only because it is declared inside_root.x as I told whatever you declare inside_root.x those will be available across all the routs. Now let us add a few more components to make it look like a real application. So inside src, let's create a folder called components. And inside components, let's create a new file called header. ESX. And the content of the header component is pretty easy. I have a header tag. Inside that I have a nap tag and I have added a few links. For example, an anchor tag for going to a GitHub, opening in the new tab, another anchor tag for Insta, another for LinkedIn and so on. Now I'm coming to this_.tsx PSX file. Going to the top, let me import this header. And coming over here in the JSX, let me use this header component. Uh, by the way, I can create a div over here and add some class name to make sure that your eyes are not hitting because of the white color. So now I go back to the UI. It is black. And what I see over here is on the /about page, I have this header with GitHub. I can click on it. I can go to GitHub page. I can click on insta. I can go to the Instagram page. So all this thing happened right now. The best part is if I go to the slash route instead of /about route, I will see this header is staying consistently. So if I go back and forth between these two pages, the header remains same. So this is what I was talking about. So I hope the root route this part is clear to you. The first route we have created is this about route. And we know that create file route is a way you can create the route from the file system. Now we're going to create few more routes and all these routes are static routes meaning these routes carries the data that are statically available within the route component. Okay. So for that purpose let us create a folder called og inside the routes folder. All the routes has to stay under the routes folder. And under og let's create another folder called activities. Now under routes I have og folder. I have activities folder. Under activities there is nothing. Now if I try the route /org/activities I'm getting not found. Why? Because I have defined the folder structure but I have not defined the route for either org or activities. To make /org/activities a route, I have to create a file inside and activities wherever I want that route to be available. If I want a route under og activities, I have to create a index.tsx file inside activities. If I want a route called activities/hackathon, I have to create a file called hackathon.tsx inside activities. Can we try doing that? So under activities let's create one more file called hackathon.tsx. And again the moment I create the file what tstag does basically it creates the basic structure for the route. You see that create file route already got imported. It has already given me what exactly going to be the path /orgg/activity/hackathon and it matches /org/activity/hackathon. This is the route and for this route I have this component created the base component. I can rename this component as hackathon component and can use this one over here and can return a little bit better looking text from here. So now if I go to / activity/hackathon I am seeing hello hackathon page. My another route is ready. So you understood how the route system works. As we have created new routes if you come to routtree.gen.ts TS file that special file you will see those new route definitions over here this was already there now we have /about for the about route and we have og activities hackathon you don't see for /org you don't see for/activities but you see og activities hackathon because we have created hackathon as a route under og and activities we have not created any route for og or activities as you have created the routes now let's talk about navigations If you have noticed we have already created type of navigations in the header component. Under header component we have a navbar where we had added a few links. These are all external links like GitHub, Instagram, LinkedIn. You remember on the header. Now these are external links. These can be managed using the normal HTML anchor tag. However, the link which has to work within the application that has to be managed in Tanstack router way. For that purpose, tanstack provide a special component called link. So let's import the link component from tanstack react router. And let's use this link component to link a few URL for our different pages. So one of the thing that we can do inside header, we can do link and let's have a h1 tag that says stanstack router. This is our header. Let's add some class name to it so that it become a bigger text and we will link to our starting page the index page the slash route. To do that we have to use an attribute called two and in this attribute we have to specify the path that we want to link to. In this case it is going to be slash. Have you noticed one thing? The moment I did slash it is actually giving me what are the other routes available. This is the beauty of you don't have to really remember and recollect what was your route name, path name etc. The intellisense gives you by default because everything is stitched together for a better developer experience. So now I have linked this tanstack router to slash. So whenever I click on this h1 it will come back to index page always. Let us add a few more links after this anchor text. Let us add one link for the about page. And of course, it has to be linked to /about. I can select it from here. So now if I see my header, I have tasted this H1. I have this GitHub install LinkedIn about everything. Let me go to about. I came to the hello about page and I can click here TAC router one to go to the main landing page, the / router page. By the way, one quick thing. Now notice one more thing here. I have made it /about. Now if I try to use any other path for which I have not declared a router yet. Think about a situation where you have misspelled a particular URL fragment or a route path. Let's say you have misspelled /about as / a b o t instead of u. The moment you do that the two is giving an error because here everything is binded. It means that tanstack router knows it clearly that there has to be a route path called slashabout and that knowledge comes from that special file the gen 3 file. If it doesn't have the knowledge of any of the path and you're trying to use that path to link to a navigation it is going to prompt you with the error saying that hey this is not possible. You're trying to use something which you have not created yet. So if you push this code and somebody click on this link they will end up going to something called /abot which doesn't exist and it will say not found. It is a pure mistake instead of that use something that actually exist in this application. This is possible because of the typescript mapping that taste router keeps in the route tree file. All right. So let's do some more thing with the navigation. For that I'll go to now index.tsx file. I'll open it up and here we are going to see two different types of navigation. One type of navigation is static navigation like you have a link tag. Using the link tag you are navigating to another page. Another type of navigation possible which is programmatic navigation. You don't have a situation where you can use the link tag. Maybe it is inside a JavaScript handler function where you cannot use the link tag. You have to handle thing in JavaScript way or the TypeScript way. So in that case you have to leverage a hook that tag router provide is called use navigate. So now we are going to see how the link tag and the use navigate is different for the navigation. We are going to navigate towards the same page. Let's say hackathon page but to different ways. All right. So let's start enhancing this. Let's replace this P with something that we are doing. We are creating a meetup tracker using tanstack router. We will learn static routing. We are learning static routing. We'll be doing dynamic routing, nested routing, data loading. Looking into some advanced concept. Now after this static information let me create a div. Inside this div I want to create a link and for that purpose let me first import link. Using this link I'm going to link to hackathon. Let's say go to hackathon. So here the tool will be /org/activity/hackathon. Let's add some class name to this to make it beautiful. All right. So I have this link ready. Now if I go to my homepage I have this go to hackathon button and if I click on this this go to the hackathon page. Beautiful. Let's add some required class name to this one so that there is a top gap. All right we are good. Now instead of link I'm going to add a button and clicking on that button I want to call a function. Inside that function I want to do navigation. Okay this is the next one. So for that purpose let's add a button. Let's add some classes. to make it look better and let's call this as a click button. First I want to see whether it appears correctly on my homepage. Yes, I have this click button beside the go to hackathon button. That's right. Now here the time for an on click function and on on click we want to call some JavaScript function. Okay, let us do one thing a very funny stuff. So this button is there right? If we click this button three times then it will navigate to the same hackathon page. If I don't click three times, it will keep remaining on the same page. This is the logic that you want to create. Okay. So for that purpose, I have to keep track on my click count, right? Probably this is the only place where I will be using this use state and use effect. This is just to demonstrate this click functionality. This use case, it has nothing to do the routing at all. Okay, for routing, we're not going to use any use effect, any use state. This is just for this use case came in my mind just now. So for that I have to manage a state. Let's import use effect and use state. Now let us take count as a state and whenever somebody click on it the button let us increase the count value by one. Now what use effect is going to do next use effect is just going to keep track of this count. If the count value changes then we can do something inside it. So what we can do in case the count value become greater than equals to three then I'm saying that we will navigate into some other page. Now here you understand this is why I got the use effect and the use state as a demonstration purpose. Here you cannot write the link tag like that. You cannot write the link tag link to and everything. It is going to shout because you cannot write the JSX like this or any HTML element like this inside JavaScript. What you can do over here? You can write JavaScript. You can write TypeScript. Now you have to navigate but you cannot use the link tag. That is when you have to use something called use navigate. So import use navigate. Now from use navigate you get something called uh navigate function. So you do conquals to use navigate. Now I can take this navigate and if the count greater than equals to three. Now you navigate to you see here again I get the autocomplete og/activity/hackathon. So if I click three times on that button then I will go to this particular URL. Now let me go ahead and try testing it. Okay. Use effect is not defined. Probably I have not imported this guy. Yeah. So let me import use effect also. Yeah. Now let me go. Yeah. So I click on it once. Now I'll do two. Now I'll do three. third time it goes to the hackathon page. Maybe I can make the UX little better over here. I can come to this button element and instead of saying it click I can just put a condition like if count is zero then say go to hackathon programmatically. Otherwise when you click on the count it will just show the reduced count like how many counts left. So if I go to the UI now go to the index page go to hackathon programmatically. If I click two clicks left, if I click again one click left, then a click it goes. So we have seen programmatically how we can actually do the navigation. We have seen statically how we can do navigation. I hope both are clear to you. Let us now talk about another fantastic thing called lazy route. Okay, we heard about code splitting it. So what is code splitting? Code splitting at a high level is instead of downloading all the code like all JavaScript code on your browser why don't we split in a way that only at this moment of time to run a particular portion of the user interface whatever JavaScript is required let that portion get downloaded on user's browser if user navigate to another page only when let's download the JavaScript related to that page on users browser this gives you performance because you are not downloading everything from your server all the JavaScript on your client browser even when a particular portion of your user interface client never visit. So you're giving that performance age to your end customer using something called lazy loading or code splitting. Tanstack router embrace lazy loading or the code splitting heavily. The automatic code splitting is already enabled. If you remember inside vit.config.ts ts file we already have auto code splitting as true. Beyond that you can now create route which are also lazily loaded. It means all the content pertaining to that particular route will be loaded only when you visit that route. If you don't visit that route, it will not be loaded on your end users browser. So you take care of the performance thing. Now let us understand how to create that. Under activities, let's create a new file called post do. lazy.tsx. This is a naming convention that you need to remember. If you want to create a lazy file route, you have to use lazy after your route name. Before you used to create things like hackathon.tsx, now you'll be creating post.lazy.tpsx. The moment you do that again the code gets created and this time it didn't import create create file route rather it imported create lazy file route and it is from the react router. Similarly it has created this path and of course the component for it we can call it as post component and we can use the post component over here. Now if I use this /org/activity/post only if I go to that URL only then all the content related to this particular URL will be downloaded until then it won't be. So if that is your use case you'll be using create lazy file route not create file route. But there is a catch. When you use a lazy file route, you won't be able to make any asynchronous call from here to download any kind of data and make use of it. We will come back to this lazy file route once more when we talk about the data and the loader. There's a special case you have to take care when it comes to lazy file route. But for now, let us give a better heading. And of course, if we go to our header.tsx tsx file and here paste it and two we will change to /org activities post because that is the path inside activities I have created this lazy route and I'll call it as post and if I go to now route tree.jen.ts TS yeah what do you see you see the post has got already added right so as and when you're creating it is keeping the track of it so if I go to UI now I have post if I click on it I see the post coming over here so it's working we'll come back again when you deal with the data I hope this is going fine for you and you're enjoying this course so far please like share and subscribe comment on this and let me know what you think of it so far we have still halfway to go but if you have enjoyed it so far I'm sure the rest of it you are going to enjoy more. We already know about one layout, isn't it? Remember_root.tsx file, the root route where you could define the header, sidebar, footer, everything that is shared across all the routes. So that's one type of layout. But what if inside one route you want to create another kind of layout? This is when the layouting concepts or the dynamic routing concepts come into picture. So now the main part of the meetup tracker. Now we are getting into creating a meetup route and inside the meetup route we are going to list out a bunch of meetups and for each of the meetups we'll have a meetup details page. So we need some kind of layout to list out all the available meetups and for each of the meetups some kind of detail page where we can show the details of individual meetups. Let's create the meetup route inside activities. So we'll create a new folder called meetups and we want to give a dedicated route for meetups means we want to do / meetups. So for that I have to create a index.tsx file. Now here one question might come in your mind. The question is I could have created a meetups.tx file directly under activities. Why didn't I do it? I want to make you understand one thing. The philosophy of creation of route. If you have to create dynamic route, it means that you have to create / meetups to list out all the meetups. When someone click on any of the meetup, you want to go to / meetups slash that meetups ID. So the meetup id is a dynamic element from the meetup data that you are bringing in. Correct? So from meetup data, wherever it is on the world, you pick up the meetup ID and that meetup ID you associate with slash meetups. So slash meetups the next part is completely dynamic. So it means you need one route to list out all the meetups that is your slash meetups and you need another route called slash meetups/ the dynamic fragment for the details of every individual meetup. So you need two routes under the / meetups umbrella. That's the reason you will create a folder and create respective routes inside it. If you had the requirement of just one route like hackathon under activities you don't need a folder over here but under one route if you need multiple routes sub routes you need a folder and then you go ahead and create it. So first is the index.tsx where I want to list out all the meetups. As you see the path is og activities meetups. I'll rename this to meetup component. And here let's create some dummy meetups data. Say meetups equals to an array. Inside that I have each of the meetup information. For example, the first meetup is about React Kolkata meetup. It has its own location description. How many attendees expected? City, what kind of take. Then I have a React and chill Bangalore meetup. Same kind of information. Then I have a Tapascript meetup. Same kind of information. So I have listed out three different meetups because this is a meetup list page. SL meetups is a meetup list page. So let's go ahead and finish rest of the JSX. Let's put a wrapper div. And now we can put a map. Say meetups dot because that's an array map. Let's pick up each of the meetup. And let's put meetup dot location title and meetup dot location. These two are fine to put in the listing page. And for now wrap them up inside a fragment so that I can start seeing the UI at least. Let's go ahead and test it out. slash yeah I see like react kolkata react kolkata's location uh react chill Bangalore location tapascript meetup and the location the UI is not that great but I get the data but remember all this data that I have got so far is statically defined over here that's fine now the next part is each of this meetup information should be a link and when someone click on each of this meetup information they should go to a different page that page should be dynamically created taking the information from this individual meetup and create with the details of that meetup. So when I click on react Kolkata meetup it should change the URL to /meup/ the ID of react Kolkata meetup that is unique identifier and then a new page where everything about react kolkata can be listed. That's our objective. This is where we are going to create something called dynamic route. How do we create it? Please pay attention to create a dynamic route you have to start the route name the file name with dollar. So I'm going to create a new file called dollar and then I'm calling it as meetup id. Meetup id this can be any name and then the dsx file. See what happens. It has created the route definition for me as usual and route is now /org/activity/meup. Still here we knew it is a meetup listing page. After that it has given a dollar meetup id. This is the dynamic part. This part will be replaced by the actual value. Okay, remember this part will be replaced by the actual value and that value we can use to do further operations. But for now if I come to my meetups index page and instead of fragment if I use link for that I have to import link link and this link I am going to use instead of this fragment and over here I'm going to use two now can you guess what will be the value of this two because if I click on this details I want to go to this particular meetups this particular meetups whatever the value is there inside this meetup object that particular meetup's details. For that I want to create a page with this meetup's id. So what should be the two value over here? The two value will be dollar meetup id. Have you noticed that I have not put this entire path /orgg/activity/meup/d dollar meetup ID. Instead of that I just gave dollar meetup ID. How is it possible? So this is how the relative path works in standstack router. So I am already inside meetups. I am already in this page index.tsx. So if I have to give another route dollar meetup ID, I don't have to come from this og activities etc. As I'm already inside the context of this folder, I can just give my route name that is enough. So just like file system, you can give the relative path as your relative route name. So now I will be going to this individual route and then I should see this particular page coming up. A few thing that I have to do. Of course this is iterating through. So I have to use a key. This is from React. Nothing to do with the Tanstack router. And let's see what happens if I go ahead and access. So I can click on this. You see what happened. It says localos 3000 activities meetups/ undefined. It says undefined but it goes to this particular page because it is matching something. I am saying whatever it matches meetups after the slash whatever the value it should go to meetups details page. So it goes to details page. But here the value that comes as undefined. But I need some identifier to identify a particular meetup in this page and then show the details of that meetup over here. But it is coming undefined. It is because I have not passed any param along with this link. Now to pass the param you use the attribute called params and over here you can pass the params. Now when I click on this link this link will go with a param called meetup ID and this meetup ID's value is whatever the current meetup that I'm iterating through that particular meetup's ID. Make sense? Let me add some class name also so that it looks at least better. Okay. Now let's go ahead and try. So let's go to /org/activities/meups. All right. So I have this meetups over here. If I click on react kolkata, do you see what happened now? No more undefined. I get react kolkata over here. If I click on tapascript meetup, I get this tapascript over here. If I click on react and chill, I get blr chill. Where it is coming from? I am passing this meetup do ID. This meetup do ID it is nothing but for each of the meetup this is the id that I am passing. So now the next logical thing for me is coming to this particular route which it is resolving to like slash bail or chill/tapascript etc. It is resolving to this particular route which is nothing but this here somehow I have to get that dynamic part the dynamic data tapascript or reacten kolkata I have to get that ID if I get that ID then I can actually look into this data and if I can look into this data with that ID I can get this details and with that detail I can actually put my JSX accordingly to populate the meetup details all these thing has to happen. But how is it going to happen? Yeah, we are going to make it happen. And for that, we're going to introduce something called loader and data. So to introduce loader and data, I am also going to do some cleanup. Instead of keeping this data, meetups data inside this index.tsx file doesn't make sense because the same data will be needed by this meetup details also. So I have to keep it in a centralized location. I can create a JSON file and keep it there. But let's go one more level advance just like your real project. Let's create a backend server using JSON server and we will serve this JSON from there and we'll be making the API call now instead of just getting the JSON data and do everything together. Now we have another project called meetup mockup API. This project is created with simple JSON server project. No rocket science in that. And the same meetup related data the JSON data we have we have seen some time back right. I have just dumped them into a file called DB.json JSON and in the package.json file you can see I'm using the JSON server to watch this DB.json basically using this DB.json as my database backend database and running the server on 3001. So as I'm running it over here it is already running local 3001/vents. It is coming from here. If you see events /vents I have three events exactly those three events. So if I copy this and go to my browser, open a new tab and try it over here. You can see that it is returning me all those three meetups. I just now spoke about all this code again inside this repository. You can go ahead and check it out. The meetup mockup API is also there. This project is also there and how to run and everything. I have defined every details in this readmi file. You can easily follow it and set it up for yourself. For now, just check out this folder. go inside this and put the command npm run start it will start the server on 3001 port all right so let us get back to our dynamic route but you know before I do anything over here one refactoring is required the refactoring has to happen in the meetup list page I don't need this meetup static array anymore right because I have an API now so I should be able to pull the data from the API itself that's where we'll be using something called loader wherever we are creating this route using the create file route put over here use loader colon a function. So we'll be using an arrow function. Now inside this function you can return any data that your component will get. So inside this loader you can make asynchronous call. You can do any computation and return the data that your routes respective component can get. How I'll tell you. But let's think about what kind of ways I will get that meetup data. Of course, I can do a fetch call because it's an API. It's an async call, right? So, I have to make this function async. And inside this, I'll do con response equals to aate page. Let me put the URL. That's my API URL. Once I get the response from there, I can get all the data. Events data equals to a response dojson. So, this will give me all the events. Now, I will simply return the events from here. So I will get all the meetup events from the loader. These events will come to my component. That's what I told. But how is it going to come to my component? That's the next question. To get all these meetups into my component, I can use something called route dot a hook use loader data and this is going to return me those events. Okay. So I can keep them in a variable called meetups because is the same variable I am using downstream so that I don't have to do any changes. So now all my data will come from that API. I have made the binding to that API instead of the hardcoded events. Can I go ahead and test this much? Oh yes, my data is coming. Now to prove that I'll open the debugger. I'll go to network tab. Let me put the network tab at the right. Let me refresh. Let's call it as fetch XSR. See here the events call. This is the /events call. Local 3001 events. It's happening. And in response I am getting all the events data. That's what I'm printing over here. So far so good. Now this is tied to my API response with loader. The next thing is when I'm going to click on it, I'm getting the ID. Now passing the same ID. Can I get the details of this React Kolkata event? So if I take this ID, I go to my API over here. And after events, if I put this ID, I get only that particular events details. This is exactly what we need, right? So it means now I can go to this meetup ids.tsx tsx file and over here I can have another loader with that loader I will make /events that dynamic data get complete details of that individual meetup pass it down the same way to my component to render it can we do that yes same loader exactly similar kind of loader but instead of https localost 3001/vents I'm also passing params meetup id where is this params coming from remember whenever you had a link you were passing this param ID you can get this param from this params which is available to your loader function and from there you can just take the meetup ID taking that meetup id you're making the async call and you're getting the data and you're just returning it as you're returning it you can get this data inside it and before that maybe I'll rename this component to say meetup details okay so just like before I can get the meetup equals to route dot use loader data and beautiful part over here is if I do console.log of meetup and refresh it. Go to the console. You see that I got this react kolkatas meetup details. That is exactly what I'm printing in the console. Now if I go back and click on tapascript, I got the tapascript meetup details. You see here you getting it? So I got the data. Now it's just a matter of putting this data into JSX and get a beautiful UI done. So here you go. I have done this JSX. Again, I'm not showing each bit of coding to it because this is normal React where I have a div and I have this meetup object over here. From this meetup object, I'm taking the title, description, you know, it details and everything. The simple JSX. So now if I go to the meetup details page, click on say Tapascript meetup, I have all the details about the Tapascript meetup beautifully showed. If I go to React chill, react chill meetup. I have if I go to react Kolkata I have react Kolkata and one more thing that we can do quickly here the meetups link is missing so let's go ahead and add it you know how to add that you have to go to headers coming here let us add meetups so that we can go to it directly and slash this is the link now if I come over here I have the meetups. If I click on meetups, I directly go over there. Perfect. So you know about data loading using loader but there are few nitty-g gritties you have to know. You are making an asynchronous call here. You are making an asynchronous call here. Now this is locally running. But if it is getting fed from a server which is located far bit slow, you will get the data with delay. Now you need a loading state. Now you will think boss I need the loading state. Do I need use effect again loading state and everything? No, you don't need that. Second scenario, what if your API is not reachable is down? You need to show error. Do you need again error state, use effect and all these things? No, you don't need that. So this router taste router give you few handy utility functions like loader with that you can accomplish it. Let's make use of them. First in the meetups index.tsx tsx which is the meetup list. We will use something called pending component. Pending component will run when this loader is fetching the data before it returns this events before it returns any data. This will run. This is like your loading indicator. This is where you can always write anything like you know loading meetup data etc. Make sense? And then one more thing is called error component. Using error component you can define what to show when there is an error happen and this will take care of it automatically. Now see the difference in meetup list page I have added these two but for individual meetup I have not added. Now I'm going to do one thing. I'm opening my API server and I'm closing it. Now API server is stopped. If I try to fetch the same API data right now it won't give me anything because it is stopped. Now if I go back and come to this meetups, this is telling me fail to fetch. If I refresh, it is very fast. So you're not seeing the loading, but it's saying fail to fetch. My rest of the UI is functional. I can go to about page. I can go to post. I can again come back to meetups. But if I try to go to any of those meetup details page, for example, let's go to react Kolkata. You see what happened? entire application got crashed because on that particular route I have not taken care of this error handling. Now I have to take care of this error handling so that this is gracefully handled. For that what I have to do exactly same thing. I would suggest we just copy paste these two things from here and then go to meetup id.tsx wherever our loader is there below that just paste it. That's it. Now if I come over here you see beautiful for react type and Kolkata is saying fail to fetch rest of the applications are working perfectly fine. Now if I bring back my server once more and I go to each of these pages meetups is back meetup details also back. So now you know about the loading state you know about the loader you know about the error condition. Are you feeling empowered? Are you learning tanstack router dip? If so, let me know in the comment. Like and share this video and don't forget to subscribe to the script. Do you remember when we did this post this lazy route I told you there is something special about loading data with the lazy route? Yeah. So let's understand that part. Now if you go to any of this lazy route for example post.lazy.tsx one limitation is it can be only used with the presentational component. You cannot make any fetch call. You cannot have loaders and everything over here. Now if you have to make a route lazy, you will definitely do create lazy file route. No problem. But for the same lazy route, if you have the use case of loading data, you have to do something else with the same route name post itself. You have to create one more route. Say post dot tsx. And now over here you can have a loader function just like before. And you don't need any component here. Why? Can you answer that? Why you don't need any component here? Because the component is being handled in the respective lazy route already. Here you have the component already. What you are doing here, you're just doing the loader part of it. Okay. So here you just given a definition of loader. I have created loader. I'm just returning two hardcoded post from here. That means coming to the lazy where you have the component. If you want to get the same post, you can just do route dot use loader data just like before to get the data that is returned by the loader. You got this inside the post. Now you can take this post do a uli iterate through it and maybe print all the post title. Okay. Now this lazy route will work beautifully. See here post post one and two. So I'll go to meetups. I'll come back to post. I can see post one and post two. All right. You're getting the point. So here the route is lazy. It is never going to download any of this content until unless you go ahead and click on it. But only point here is you cannot load the data inside the lazy route. For that you have to create another route with the same name without lazy where you can do all the data loading logic return the data same data is available inside the respective lazy route using route dot use loader. I hope it is clear to you. When you talk about routing, URLs are the most powerful thing. You know, you can manage the state of the application through URL. Yeah, you don't need react use state or use reducer or any other state thing. You can do this and also in the type safe way. You can actually ensure that through URL you can pass the data and that data you can capture to do different operation on different routes and each of those data can be bounded to a particular type that you define and make it type safe. So now let us learn about a bit of search filtering params and etc little bit more advanced concept but I'll teach you step by step so that you can get it permanently. Imagine we are going to create a filter over here. We want to filter by let's say location. I want to know what are the meetups going on in Bangalore or by topic maybe what are the full stack meetup going on in Bangalore. What are the react meetup going on in Bangalore? I want to create some kind of filter over here. Now in the regular react application what you would have done you would have had a state for each of those right for the topic for the location you would have had a use effect and then you would have passed this state value as the dependency to the use effect and whenever there is a change in the topic whenever there is a change in the location your use effect the side effect runs it goes through the data it filters out the data that's the normal way of doing it now if you go through that path it changes the entire architecture of your application you have to have the data somewhere which you have to fetch keep somewhere in a state maybe global state in your application manage the things from there or maybe inside the context and everything but here our data is driven by router router given as a loader method using that loader method we could load the data for the individual route and manage it over there now the same thing we can utilize further to have this filtering capability because our router is now data aware so let's implement it where we are looking for a filter based on the city and the tick. I will go to the meetups folder, take out the index.tsx file. This is where we'll be doing all our changes. And one beautiful part of tanstack router is it is type safe. It means that each of the parameters we're talking about like city, take everything we can define what should be the type and we can put validators to our router where router can validate whenever somebody putting any random value to those. For this validation we can use a very well-known library called zord. So let's see how zord can be utilized with tanstack router. Let us first install zord. So do npm install zord. If you're using PNPM, use PNPM install Zord inside the Meetup tracker project. The UI project Zord has been installed. Now I can import Z from Zord. And now I can define a schema using let's call it as search schema. So const search schema equals to Z dot object. Again require a different master class. If you feel that I should do it, let me know. I can come up with a crash course on Zord as well. So here you define all the schema. Now we are dealing with two different aspects. One is city and another is tech. So let's define city schema and then we will define the text schema. So for the city schema what we'll put it should be a string and if no value is provide let's have all as the value. Okay, this is how I am defining. Same thing I'll put for take also. Let's not make things complicated. And of course this is comma. So this is my search schema. I can now utilize the search schema while creating the route itself. Here I can say another property called validate search Poland pass the Zord schema. This is beautiful. This is beautiful. Right. The the way that it is tied to this validation type safety and all this is remarkable. Now nobody can put anything other than string values for the city. If somebody don't put a value for city and take it will automatically put this string all for it. Okay. Now I have defined this validate search. How do I get this search value this city and tech etc. To get that I have to define one thing called loader depths. It is also called loader dependency. There is a use for it. The loader dependency helps me like whenever the city or the take that value changes my component can be notified with the latest value. If you have use ustate ustate provides you two things the current state value and the updated function. Whenever you update the state using the updator function, your state gets the current value. Isn't it? Similarly, if somebody changing the city or the take value in my filter, I should get the latest city and latest take value. The same latest city and the T value should be available inside my component so that I can do further work further filtering on this meetups data. Isn't it? So for that purpose, I will define something called loader depths. In loader depths, I'm saying the search should be using the city and tech. And this is the city and tech we are talking about. Now this city and tech will be available inside my component via route dot usage. So the city and tech now available inside my component. Using the city and tech I can do any filtering on top of this meetups and I can do stuff. But you understood like how these things are tied together. For now let me do a console dot log of city comma tech. Let me see whether all these things are coming or not. Okay. Now, two things I'm expecting. One, the moment I go to this particular route which is inside meetups means when I go / meetups, it should automatically add city and take as query parameter as search parameter to my URL. And the default value of them should be all. This is what I'm expecting. So, let's go over here. Let's click on meetups. Yeah, you see the URL. It has added two things. One is city equals to all. take equals to all. If I go to my browser console, I can see this all and all. This all and all is coming from here this particular console.log. So my two assumption now worked. Now only thing left here is to create a filter UI where user will be able to maybe specify a city or a tech click on a button and then that has to be passed to my search schema and then I have to do some filteration over here to filter the meetup data to show it properly. Let me quickly code that because this is again pure business logic and react part or the TypeScript part. Nothing to do with the router just I need to filter an array. So let me code it quickly and then explain it to you. So what I have done the code let's understand as we are using the loader depths I told through loader deps we can also get the data over here but along with that one more important thing is whenever we are using loader deps our loader function gets deps through the depths I can get whatever I have passed inside the depth city and take that's value. So the city and take values are available over here with loader. I already have the events value. We know that we have coded it before. I'm just putting my logic over here. If the city value is there and if it is not equals to all that means some values user have selected from UI. Let's filter my events array with that. Same thing for the take and finally return the events array. I don't need this console.log. I'll just remove that. Okay. Coming to my component. Exactly the same thing. There is no change. I have taken this city and take and then created a simple button over here. And that button takes an onclick handler called handle filter. The button is for filtering the events. Handle filter. Just look into handle filter. What happens? Handle filters navigate to this. The search should be city Bangaluru take full stack. I have hardcoded it over here. You can pass any value from a user selected component like a list box or somebody typing something you can take that value and you can pass it over here. I have just hardcoded it for the testing purpose and I have a clear filter which makes it again all and all. So whenever it goes as all and all my loader gets called with this devs devs. City is all. So it doesn't do the filtering because that is the logic over here. If the devs do city is not all only in that case it will do the filtering for both city and tech and the latest data it will return over here and that is the data we are doing the looping and all. Did you notice not a single use state here? Not a single use effect here. Everything is managed by the router and how is data loading philosophies are. You just need to remember you already knew about loader. The only new thing over here is this loader dips to track the search params as dependencies. As and when search param changes this loader will be called automatically with the recent value of this depths city and tech. You have a new filtering. You have a new events data. The new events data automatically come over here. Your map is already there somewhere below. The map gets the updated data. That's it. Pretty simple. And this navigate we have already seen this navigate before. Programmatically if we have to navigate from one page to another page, if you have to link, we use navigate. It comes from the use hook. Otherwise, we use the link tag. Here we cannot use a link tag. So, we use navigate. Simple, isn't it? So, this is how search params and the state work. Let's see if it is working. Well, let me come to UI and then I'll go to BUPS. Wow, I see the filter over here. Filter events city all take all here. Everything all all. Now, if I do a filter events, I see only tapascript. Y see the URL city is now Bengaluru take is now full stack. That's the thing that is matching one meetup which is the tapascript meter and I have hardcoded this in this filter button. I'm hard coding where I'm passing this Bengaluru city and full stack take so that and that's the value we are taking inside the loader through this depths because deps has the city depths as a tech and we are filtering and passing the filtered event rest of the code we have already done before it is working seamlessly so that's how the state can be managed that's how search params can be managed that's how deps can be managed I hope this is clear to you now as a task can you do this instead of hardcoded filter events can you Add two list box over here or two text box over here. One for city, one for tech. When someone fill up the city, someone fill up the tech and after that if they click on the filter events, you take that field value of the city and the tech and rest of the logic is already written for it to work. So can you refactor this to make it much much better filter? That is on you. We have got our data facing and the search parameters working. But now we are going to hit a wall. What if we have to create a login page or an authentication system like if someone wants to create a new meetup they have to go through certain authentication and if the authentication has to happen after the successful login I have to preserve that the user has successfully logged in somewhere in some object in pure react how do you do it you use react's context API using use context hook you put the information whether a user is authenticated or not if the user is authenticated the authenticated users information you put inside the context so that in anywhere in the component hierarchy you can get this information available but here is a problem when we are dealing with tanstack router our route definitions like loaders lives outside of reacts rendering cycle you cannot call a react hook inside tanstack router route definition that's the problem and if you cannot call a hook that means you cannot use use context to do this thing that we are talking about so for that purpose we need something call a route context. So now we are going to create a route context to establish this authentication mechanism we just now spoke and then later we'll be utilizing that authentication mechanism or the data to create protected routes. Now how do we create routing context? First under src let's create a new folder called utils. It has to be outside of the routes folder because inside routes everything is a route in the dunstack router. And inside this let's create a new file called o.ts. A simple o utility will have three methods. One is for login, one is for log out and another one is to know whether the user is already logged in means he's authenticated. And we are utilizing local storage here for the demo sake. If user is logged in then in local storage we'll create a key called is authenticated with true. If user is logged out we'll remove it. If user is authenticated that means we should find this is authenticated key in our local storage with the value true. Right. Coming to the root route. First import the o from utils o. Then create a route context. You can give any name like interface my route context. And here you specify what are the types that you are going to keep in this context. For us right now it is o. And the last thing would be you are using this create root route right instead of create root route the next thing that we will do you will use create root route with context. So we will change this definition to say create root route with context and we'll pass this context over here. Remaining things remain same. So the change on the root route is very simple. Import the O type. Define your router context and change your create root route to create root route with context and pass the context that you have created. This is the second thing that you have to do. And we are dealing with only O. So O we have created. If it is something else you want to keep in context, then we have to tell the context the type that we are dealing with. Right? Now it is only the O type. Next, open the main.tsx file. Ctrl P. Main.tsx file. This is actually the entry point of your tanak router application. So far we didn't have to do any changes over here. First import the O and then where we are creating the router the create router over here you define the context. Context is O. This is where you are injecting the context. So that's all. Now this O is available in the router context. anywhere wherever you are creating the router or you are using loader or you are using router specific things you should be able to get this o data over there. Now let us create a new route for creating meetup and on that route that route page we'll have a simple button clicking on that anybody will be able to create new meetups as simple as that. So let's go ahead inside our routes og activities meetup. Let's create a file called create.tsx. This is for creating meetups. And here we are going to use that authentication information that we have stored in the router context. How can we do this? I'm going to show you that. So wherever we are creating this route, this create file route. You see this route og activities speed pup/create and the component over here a simple component here we can get the data that is stored inside the context because this is inside the route right that's what that's why it's called router context how do we do it like loader function we have something called before load so before loading this route I want to know whether the user is authenticated or not so that's why I use something called before load now this before load is again a function So I will define this function over here. Now this function gets something called context. This is the router context. Now from this context I can get something like context dot you see o this is why it is beautiful. Everything is stitched using the type. You don't have to really guess. If this comes means things will work. If context do is authenticated. Remember inside O we had three methods is authenticated, login and log out. Is authenticated. So if the user is not authenticated what do we want to do? We want to throw a login screen a login page. Correct? So we want to throw. So let's use throw. And throw means we want to redirect user to this login page. So let's use redirect. And for that I have to import redirect. importing redirect from tanstack react router and use redirect fantastic way that we can do redirect one is where to redirect that is two I can redirect it to a login page which I'll create eventually now and while redirecting I can pass certain parameter so I can say search parameter I can pass an alert saying that you must be logged in to create a meetup I was saying in the beginning right Even that message is not hard forward. It is coming through router. This is how it is. So if the user is not authenticated, you redirect the user to login page and also give this as an error so that in the login page I can take this error and I can put it beautifully that user must be authenticated. How beautiful is this? And coming to the JSX, let us have a simple form with a simple button saying submit meter. Okay. So now let us try to access this create guy. But for that come to the meetup list page which is this index.tsx and after the filter let's add a link. This link basically goes to create /create after meetup. So I have this create already. So if I click on it it goes to /lo you see /lo login I have not created yet goes with a search param alert equals to you must be logged in to create a meetup. Things are working as expected. So now the only thing that I have to do to make it seamless is under routes new file create a login tsx. It came hello login. So my login route is working. Now let me create a simple you know email password login page. Here is my login page and it looks like this. A simple react component. However there are few react router specific things. Let me just explain those. You remember we are getting a search param alert. You already know about the search paraman state, right? I've explained to you. So the search param is coming over here is called alert. Again I need zord for that so that I can validate and I created the schema just like before. This is the route which was already got created. I pass this schema to my route. Right? If there is an alert, alert will be of type string and it is an optional. It may or may not be there. And that's it. Now in the login page on the login button click I have a handle login function there I am calling o.lo login. Now how this o is coming o is coming because I'm importing over here and o is having something called o.lo that we have defined and then I'm navigating to this page the meetups.create after login I should be able to create you know navigate by now so I am not explaining it to again. So now what will happen if I log over here let's say aapusmail.com and some password if I do sign no validation actually I end up into now my submit meetup page now I'm logged in okay so if I go to meetups again if I go to create it is not going to ask me to login again if you go to your browser dev tool and come to application you will see is authenticated is true if you delete this guy is authenticated and then you come back to meetups page and come to create it will again ask you for login because now it knows that you are not logged in. So you login you come back to submit. So this is how we have protected or made this particular route as private. So without authentication you cannot access it and for that purpose we have used the router context. One thing I want to mention don't put everything inside router context. Try to learn which one you should be creating inside router context versus your use context or any other storage router context the items that you should keep that you want to access inside your router component wherever the router wherever you have loader before loader all these things because you cannot use use context over there. So only those items should go inside the router context and then you can use it like this. So we are done. Now next what we are going to do we are going to learn about mutation. So we got this submit button and this submit button is inside a form. So here we can handle this form submit using onsubmit and we can call a function called handle submit. Let's define handle submit. Handle submit equals to async e.reactform event. It has to be async because we're going to make an async call. Now first thing as usual we'll do e.prevent default so that it doesn't refresh on browser. And here we are going to make a post call to create a new event. So let's do a sage. Our URL remains same which is our events URL and here we will put all the required information for example method is post and let's put a cooked up body. The ID is new meetup title hardcoded new developer meetup because we are not having a form to fill up meetup name location and etc. I leave it to you to complete this application but I'm showing like how things works. Right now I have done this. Okay great. Now after that I can do like once you submit this form once onsubmit happen once a new meetup gets created I navigate back to the meetup list page okay so for navigating I definitely need router dot use and from here after everything completes here we will do navigate and two we can do dot dot slash why we can do slash where exactly this create route is this create route is inside src routes ORG activities meetups here is create. So from create if you have to come to the meetup list page you have to come to /meups it is just one level up in the directory structure dot dot slash or the file structure. So this dot dot slash itself will navigate you one level back which is /meups. So can we see if it is working? All right. So we are in submit meetup. I'll click on this. Yeah it went back to /meups. My new thing got created. Yeah, one new developer meetup also got created which is great. Now one thing I want to mention over here as we have changed the route from this route we went to meetups route this got refreshed but if we had to do it in the same route being on the same route if we have to refresh the data we would not have seen this new developer meetup immediately for that purpose you have to use something called router invalidate. So for that you have to import this use router. Then take the router from use router. I think some of you have already done in nextJS almost like similar kind of philosophy and before you navigate you do forcefully router dot is invalidate. Okay. So this is a kind of killer switch it dump the stale data and refresh your data and get all the refresh data. Okay. So this is what another thing that you need to keep in mind. So now have you seen we have built this application end to end basically we can go to this hackathon directly we can programmatically go over here we can go to outside link then we can go to static pages we can lazily load stuff we can go to meetups load the meetup stuff then we can create a new meetup we have logged in or not if we are not logged in we are getting the authenticator stuff lot of stuff man lot of stuff that we have done last but Not the least I want to talk about this debugger. Again this debugger we need it as a separate session separate crash course for this debugger. It has huge huge potential but at a very high level you should be able to see a lot of stuff from here. See all the routes that I have created are here. See and you can actually navigate from one route to another route very much from here. You see I'm navigating from one route to another route. All the route information that you will be able to see here. For example, if I go to meetups right now, you see the search params. All the search params are here. You can inspect each and everything from here. Very very well. So this is something that I wanted to take as a separate crash course. Maybe in future hoping that I'll be able to cover it. All depends on whether you need or not. Let me know. So looks like I have done everything that I promised in the beginning. Only thing now left to do is the last part where I told that I'll be talking about a little bit of comparison. Now by this time you might be already having a feeling like okay we have nexjs we have react router dom react router dom is having multiple modes and then we have this so what is the actual difference between them and what kind of comparison study that you can bring in I have used nextjs exclusively I have used react router dom to some extent and I'm now exploring entire tanstack ecosystem so what I can say here one thing that I found out that tanstack route router especially the routing system the type safety part that we have seen you have a very very less chance of going wrong when you are coding so it means you have even lesser chance when you go to production if you talk about the type safety in react router it is partial or you have to forcefully opt in for it in nextJS it is fully framework dependent right next is a great great framework one of my most favorite but it sometime acts like a black box recently started opening up for better DX but most often it is like a black box. So even the type safety matter is completely within the NexJS framework itself. However in canstack router it is like a first class citizen. It is like happening automatic. You feel like creating another TypeScript application. That's the feeling that I get. Then comes the data fetching. In case of react router it is like mostly client side focus. In case of NexJS router it is most like server side focus. In case of tanstack router what I find is like a hybrid culture. It is more about the loader driven. There are some similarities of that with uh react router term framework mode but it does both. It has the capability of supporting both. Then the best thing that I like about it is the URL search state. So URL search state if you go to react router term you have to explicitly parse the string to do lot of things by yourself. So you have take equals to all city equals to Bangalore. You have to pass that by yourself. But have you seen me parsing anywhere so far in the application? No. It is completely zord validated. Once you define the schema, give the schema to your router, boom, tast router takes care of it. And the same thing in the next JS we have the support for the search params. But the support is that limited. The type binding and everything is not that explicit. I love giving analogy. So if I have to put with analogy, this is what I'll say. Imagine you are building a house. Now this react router is like a generic toolkit like where you have all the measures you have cut every pipe by yourself and you do those stuff like rudimentary stuff. Nexus is more like the entire house given to you like you go live inside the house and be happy. But you cannot change your floor plans easily. That kind of restrictions you have but tack router what I feel is like having an architect that draws the blueprint for you automatically as and when you go and ensuring that you know every cuts, every pipe everything kind of fits appropriately as and when you start building things. So that's the comparison that I can bring between three. love all of this but right now a few inches more for Tanak. So that's it for this crash course. I hope you enjoyed it and if you have come this far thank you please support tapascript because I try to bring lot such content to you need motivation for that. Next I'm working on tanstack query or the react query similar kind of crash course where I'm going to teach thing by doing and I'm sure that you're going to learn lot of stuff from there once I'm done with the tanstack query and now with the tanstack router I am going to start with tanstack start framework that's why there will be multiple videos and we'll cover it as a framework and we'll start building things using it stay tuned we'll be coming back again keep giving your support please like and share this video thank you very
Generated algorithmically for Search Engine
Indexing.