TanStack Router is my favourite React Router -- TanStack Router Tutorial

10stack router is a comparatively new routing solution for react if you don't already know routing means that you have some kind of URLs in your application and uh by default react doesn't let you do that you need to have some kind of logic there to make it happen but routing Solutions like T stack router and react router Dom make it very easier for you and I think tan stack router has taken it to the next level where it has a lot of different features like pre-loading data type safety and a very wonderful search param API so in this video we are going to look at tan stack router and we are going to see how you can set it up in a V application and how you can get going with it and explore the different features just like every other video made on tools I like to go to the home page of the tool and see what it's all about in front of all of you guys so for 10 stch router it is modern and scalable routing for react applications a fully type safe react router with builting data fetching stale while revalidate caching and first class search param API and there are a lot of different Fe features here so like type safe and Powerful yet famili really simple built-in data fing with caching search parami to make your state manager jealous buy by Redux I mean I don't think anyone uses Redux now anyways so yeah there are a lot of different features here you can go through all of those and uh yeah one of the cool things is the lightweight like it's only 12 KB okay enough let's let's let's go just go to get started and we will be in the docks as you can see it's just V1 and um it it just came out recently and there are a lot lot of different things here you can have a look but what I want to do is check the installation thing and uh there's only one command here and that's fine but what I want to give you a heads up on that the docks for T tan stack router are not that easy to navigate like I'm really fan of the all of the things uh in tan stack like tan stack re query and stuff but I don't know why but the T stack router documentation is not like easily accessible when I was trying to create a video for what I'm going to do today I had to like go through the examples and stuff and I missed out things in different files and which Wen like mentioned up front in this documentation and they're like deep inside some kind of different stuff and it was difficult but I am pretty sure that they are going to update documentation even I can contribute it to be completely honest and um yeah let's make this better but uh not in this video we are going to work with react router 10 stack react router in this video so we are going to use this command first of all we need to create a v tab though so I'm going to bring my terminal in perfect let's do pnpx create vat latest and uh I'm going to name it 10stack router I guess 10stack router and I'm going to use template um reacts because we are going to use typescript in this tutorial I'm pretty sure you can still use it with JavaScript but you won't enjoy the same type safety I'm pretty sure so let's go to CD you know what I'm just going to copy these commands perfect and now we will need to install some packages now we do not we don't need to just go here first let's install um T stack react router we also need react query because we are going to do some preloading so in the examples of react router from from danc uh they have examples where they have used react query to preload some data in two pages so we are going to use that t stack SL react query and there's one more cool thing that uh uh react router from tanack I always say react router but tanack router has they have this Dev tools which you can install and uh I think it's pretty useful so we we should install it but it's a d dependence uh no it's not a de dependency so I think we should we can just install it right now yeah uh let's install these three packages and we should be able to proceed perfect now I'm just going to do code do to open Visual Studio code here let's get this to full screen it's going to take a while to load but yeah we have just a plain wheat app now we need to follow through the documentation and there is few things uh I think need that needs to be updated in the documentation uh which is like getting uh tan stack rter set up with Ved so let's go to the quick start here and it says using file based route generation plus weed now the thing with tanack router is that you get both the file based route generation and code based routes so what does file based route mean so if you have used nextjs it has uh file based routing system so where you have a Pages directory or if you have an app directory you have folders for each route and within that if you're using a app directory you have page. TSX if you're using Pages directory you simply have index. TSX or just the route name. TSX and that's how it works but uh yeah you can have the same behavior in V where you can use file based route generation what you need to do is you need to install this package so I'm just going to copy this one and uh I'm I'm just going to use it with pnpm so yeah now let's follow through the documentation and see what else we need to do it says configure the V plugin now we need to import the V plugin and add it into the V config V.C config dots file so let's go back to code uh let's open the vconfig dots file let's import this and after react I'm just going to use stand stack perfect now we have set it up in the configuration now it says we need to create the following files but we only need two of them to be completely on H is the about is only for demo uh and we don't even need to create app. TSX file I I'll explain you why but uh I think this is an error here uh but uh let's try to First create the root. TSX because it's a mandatory file which uh gives you the base layout of your entire application so in SSC I'm going to create a new folder called routes and I think this is supposed to be named routes so you cannot have anything else and here I'm going to have root do TSX file now let's go back and see what do we need in the root. TSX file so we simply have a create root route from U tack react router and uh it just rendering a simple layout and in the end we have an outlet here so like uh for every route this will be rendered and then it will be passed to outlet uh it's pretty similar to remix where this Outlet will render anything else which you have so if you are on slash about this will be rendered first and slash about route will be rendered in the outlet so let's copy this consider your Outlets as holes I know it sounds weird but consider them as holes where you can insert stuff so yeah I'm just going to paste this here uh we I think we do not need to touch it and it very simple we have uh two links here we can simply remove the about one because we are not going to create it it's using Tailwind we have configur tail but it's fine then we also have the tan stack router Dev tools here so yeah that works now let's go back here now this is the index. la. TSX what is the same name yeah index. la. TSX now we need to create it in side RS this will be our base route our slash route so index. la. DSX we're going to paste this here what is the problem yeah it seems like we need to do oh I think we need to start the dev server yeah because uh when the dev server is started uh T stack router generates typings and stuff yeah the error is like automatically gone as soon as we like just uh have pnpm Dev T stack did its thing and yeah the error is gone now let's move on to the next one we will not create the about one it's simply unnecessary and for s/ app. TSX the thing here is that you have this app. TSX file but like a it's filled with all this garbage and I must not say garbage but we are not going to use it anyways but the thing is that we are not supposed to be editing app. TSX instead we need to edit main. TSX and here is I think where it's wrong because if you look at the code this uh interaction with direct document and I think the only place where document was ever used is is this place and uh yeah let's copy this file and let's just paste it here so I think most of the configuration is just done uh we need to re remove the react from here perfect I think this is the only configuration we will need uh this is was basically just a boiler plate and the thing here is that uh we are using this uh I think this is very important if you're using typescript this will allow it to generate typings for like every single thing so they have it in their dogs just don't skip the skip step and ensure you add this here they had this in their docs so yeah now there is one more thing I think which is not working so if you like save this and try to go over to our application so if I go to Local Host 5173 not another page but uh just in the main page you will see nothing so let me make sure that in index. la. TSX we have something we have welcome home right so why are we not seeing anything like we did all the configuration right according to docs uh this was the main main file and we did all the configuration except there's a little detail we are missing here so let's go to main. TSX file again and it says document out get element by ID app it took me like uh 15 minutes to figure out what's going on because I don't know I could have figured it out a lot sooner but anyways so it's a it's get element by ID and we are targeting an element by ID app so if you look at the index.html file we have div ID root so there are two things either you can change this to app or you can change this to root I'm I'm deciding to change this to root the documentation definitely needs to be changed uh unless I'm doing something wrong which is most likely probably I'm doing something wrong but um yeah if if somebody from the team is watching and want to point out what I'm doing wrong feel free to do so uh so I think now it should work uh let's go back yeah now it's welcome home now if you see there's a home thing here and in know index route in in a index route we only have vcal home so the reason behind is this is that we have this root. TSX file which only can exist in the root of the roots folder and it can only be created once and um it has all of the layout the default layout so that's why it's appearing first and then we had the outlet thing here and the outlet is this thing so we have inserted the pieces together and the router de I want to show the dev tools so if you just click here uh the dev tools will be up and you will see all your routes here we only have one right now so it's not going to show us anything but we will create one to show you so there are two types of routes I think here uh we notice that we have index. la. TSX it has a little significance because if you have lazy. TSX in between that means that the bundler bundle for that file will be a lot smaller smaller but that also means that you will not get some features so like if you want to have some kind of pending component oh you have it but uh yeah I think it was loader so if you wanted to have a loader or something you cannot have it here so if you want to use features like loader you need to have a normal one not a lazy one and we will see how to do that further in this tutorial so let's try to create a new route here I'm going to say let's call let's let's just call it um um about yeah just forget about. TSX and now I'm just going to have an RFC so the method to go with this is like uh you can simply do export const route name should be route like this and you need to have create lazy uh this one is not the lazy one so create file route and we need to pass in the route here so hm first of all I think we need to save the file that's when it will show us the recommendation so uh if we check the recommendations we have about here which is always nice to see and now we can have some configurations here because we need to provide which component it needs to render so we have this about component so I'm just we just need to pass it like this so we just say component and passing about perfect now if we go to here and if we goes through to slash go to slash about and yeah we have this about here I didn't want it to paste it from there because I wanted to show you step by step if you wanted to create a new route how would you do that and that's how you do it now in the dev tools you will see that you have two routes and it will show the active one in green and if you click it you will have more information you might see my face here but uh there is more information so even here there is more information so if you're like uh doing some fetching and stuff it might be very useful because right now the a loading is false but if there there is some kind of fetching happening when the route is loaded this will be true and you might be able to do some debugging so I think it's a pretty cool tool we don't necessarily need it right now so I'm just going to close it let's move on let's move on to layouts if you have used Something Like Remix you know there is a very good way of creating a layout uh for your routes but in 10stack router it took me a little while to figure out how layouts work because there's no proper documentation or or maybe I just missed it but the way I got to know how layouts work is trial and error and just getting through the examples and it wasn't well documented in docs or it wasn't like in the first sidebar where like there is no layouts option and I couldn't get it to work in the first place but now I understand how it works and I'm going to teach you so what happens if you if you have a bunch of routes which will follow a same layout uh what you need to do is you need to First create create a new file which represents the layout name so for example uh I have a layout one so I'm just going to call it layout one but instead of just directly saying layout 1. TSX we need to have underscore layout 1. DSX and now you can simply have the same thing which we had before I'll I'll let you know why this is called underscore but uh layout one let's try to complete this first X Port const route is equal to um what was that again uh create file route I'm just going to save the file and then we can just pass in layout one it's fine because it's not going to be rendered so if you go to this URL it will not be rendered so it's just fine my keyboard yeah uh then we can have the component and we can pass in layout one perfect now now let's try to do this first if if we go to uh slore layout you will see not found but we do have the file right uh then why is it not found hold on why is the about page not loading yeah it is so this is because we have an underscore in the start what does underscore mean it means that hey we are just creating this route but this is not a public route you don't have to show this on the screen so just in a very simple terms this is the best explanation I can give you now what you want to do uh this is the group name now what you want to do uh you need to create a new folder and we need to pass in the name of the group which isore layout one and um whatever routes you have will be inside here so you can simply have new folders you can Nest routes and as long as you don't have an underscore those will be uh added to the layouts thing so let me show you an example I'll create a new folder here again and I'll um I'll call it um let's call it I'm just going to call it user and in user I'm going to create a new file called route. TSX and uh here I'm just going to do RFC save this file uh let's remove this export cons I can't type today uh create file route and we need to yeah now we just need to use the layout one user and uh component user let me change this to user if save this if we go back and if we try to go to layout slash user it will say not found but however if we remove this and we directly go to/ user we will open the page and we will see layout layout one which was inside of the file in layout 1. TSX the thing is that we are not seeing the route let me have user route is here if you save this if you go back we will not see the user route is here thing it's supposed to be a layout right uh it needs to wrap your content around a layout so it's not showing the content here so what's wrong here remember what we did in the root file we had an outlet uh here we do not have an outlet so we need to create one so either you can just have a div or you can simply have the outlet right there I'm going to create a div and I'm going to just have the outlet like this uh I hope this works oops Yeah now if we go here now we have user rout is here it works perfect this was pretty confusing for me now What's Happening Here is that uh layout one is being omitted from the actual browser routes and uh it's directly going to SL user and route. TSX means that it's the same exact path and what does what is the difference between index and Route so I want to show you with an example uh with a madeup example so imagine if you have a route which is/ user and it's supposed to be SL user SL username but somebody decides not to pass in a username and just say SL user in that case you might need to be showing something some content like hey please enter username uh in that case you might use IND X do TSX but for absolute paths like uh about. TSX or something like that uh if it's uh if it's the index route you use route. TSX that means that there is nothing in front of it and you can simply have this and there this is the exact path and there will be no uh params in front of it perfect now this is done now I'm want to touch on uh the basic path parameters so if we go ahead and create a new file here uh I'm just going to call it user uh dot we we need to passing a variable name so I'm just going to do not cap sorry username dot uh TSX now we can access this username this is supposed to be path so what's happening it's uh it's denoting that it's user SL username path so let's do Expo uh we need to do RFC first let's save this uh perfect and now what we can do is we can simply do export cons route is equal to and we are going to do yeah except we we don't want the one which co-pilot suggested uh we need to import this so perfect now we'll have the user / username thing let's have this and now we can pass in the component so component user now the thing is how you can access the path parameters inside your component so this route gives you a lot of different hooks so how you can access them you can simply do uh const uh I'm going to open a d structure and I'm just going to do route. use params perfect and now you can simply access the data here so the variable name is username so you can simply find it in the username here and you can simply have it printed here so I'm just going to have it here oops not not the dollar username name perfect now let's go back um H there is some problem here let's try to reload yeah let's go to slash user slash aava now it says user atava if I change this to it will yeah just works now you can do whatever you want with his username or you can use something called as loader which we'll look at later uh where you can simply fetch your data before it even reaches the component uh it's pretty cool and uh yeah now let's look at search params it's it's a little complicated but I think it's a pretty good feature so I haven't tried this one myself so I'm going to try doing this in front of you so I'm just going to create a new file uh I'm going to call it search. DSX uh I'm going to have RFC again I know this is very time consuming but whatever you in a in a production I mean you might not be like uh spending like 50 hours of your time just creating routes right export const route is equal to uh create file route uh we need to save this yeah so the tanack thing already like automatically put this up I didn't do this it's pretty cool and then we need to pass in the component perfect and now we can get a we can get a lot of search parameters like there is no kind of framework that you can set that hey we only want this search parab we we only want a search query we only want the limit you cannot set that the user can literally put anything it can say um go home is equal to one and you need to accept that and there is nothing you can do about it but what you can do here is you can do some kind of validation and after the validation is done you can pass the final search to your component so how do we do that so I have it here let me uh okay let me just go here and uh show you in the documentation we can go to search params and we can see a lot of different things but the thing I want to show here is uh you can okay let's look at this later but first of all I want to show you this one so what we are doing is we are creating a type and then we are using validate search and we are trying to return as object which is like validated uh search parameters back to the component for further use so how do we do that um I'm going to create a new type here um type search params perfect query string and I also want to use limit number perfect uh let me see how they handled the number oh they just use number thing all right so what we can do is uh we can just go here and we just use validate search and uh we can have a search which is a record of string and unknown because we don't know what the actual thing is on the rhs we know that the LHS is a string but we don't know what the rhs is so yeah now we can hold on how did they all right so they just try to return it that way h i see now we can simply pass in the typ just like they did so I'm going to have search params here and now we can have a function where we return the query yeah perfect uh here we are going to do number search. limit or else we are just going to pass in 10 as default so if nobody like if they don't pass it we are just going to pass in 10 so yeah perfect now let's uh yeah first of all we need to we need a way to access these here right so we can simply do const let's open a destructuring bracket and we are going to say route. search and I think that should be enough to give us everything we want yeah limit and query so you can do a lot of different things but what's the oh yeah it says yeah it's unused but yeah we will use it right now so yeah perfect you're just going to have it like this we're just going to print it out but in a typical scenario what would you'll be doing you would be using this data and you would be making a f request or something whatever you want to do it's fine we just going to print it so let's go back uh let's go to/ search I want to just see what happens if we just go to search it says there is no query um so by default we haven't any query so that's fine and for limit there is no limit provided uh oops I don't think I provided a limit oh so it automatically adds it so if you don't have a limit it automatically adds it I think that's what they meant by great state management using query param so if you have something default it will automatically add it here I think it I like it so if you have a query here uh you can pass it um I'm just going to use aava so yeah you will have aava here so this is pretty type safe like you you get like all the stuff like you have the limit as number if you have something else you can even get recommendations for it and I think it's pretty cool taking rout into the next level so yeah now I want to show you how to link this um they have a very cool method uh typically what you would do in like linking to like creating a search is like write this ugly URL and stuff and it's pretty bad but uh here they have pretty Co cool way so they have their own link component which you can use and we can pass the URL and we can pass in the search params like this and I think it's pretty cool uh you don't need to write all the ugly things and it will result in a URL like this and like if you have like spaces in your stuff you do not like uh need to worry about all of the encoding stuff it does it for you I just love it so let's go to index. la. DSX I'm I'm just going to have a link here here so link import it from tanack router so link to I'm just going to have search you see how we just used two and we got all the recommendations uh I'm just going to use search here and um search something so typically you would have a state and uh then you would uh just modify the state params uh search params for this link but uh we are just going to have static now we have an error and uh I think we have an error because it expects search params and this is pretty nice if you like don't have the required search params we don't have it optional right we don't have it as optional in the route but if you create it as an option it won't give you an error I'm pretty sure but if it's not optional it forces you to pass in and search and I just love it type safety is on a different level so if you search we can pass in the things we have it even tells you what you need to pass in so limit we can pass in 10 and uh for query we can pass in test but I'm say I'm using a space here because I want to see how the if the incuding works or not so let's go back to index and let's click on search something yeah perfect it TS like the per 20 thing which denotes the space and the query is here the limit is here perfect I think I think it's pretty cool one last thing I want to show you is the loader so you can actually load stuff and pass it to direct directly to the components instead of fetching inside the components so what you going to do I'm just going to create a new route here so I'm just going to call it posts. TSX again the same thing I know it's anyways let's not complain now uh I'm going to remove this and Export const route is equal to create file route save this uh um slash posts perfect and I'm going to have the component as posts perfect now we don't we are not going to use any kind of path Pam search P if you want to do that feel free to do so but I'm not going to do this but uh in loader we can have something like this uh we can pass in a function which actually does all the loading and uh what we can do is here we can simply return a string for now I'm going to show you how it works with re though so the post loader is done loading so if we have it below this so I'm just going to have a b tag so how do we have the loader content here like you can just you canot just simply get it so there's another hook you can use uh it's const uh response actually because it's only just a string so route do use loader use loader dat actually I will not trust go pilot with this like it's super new and I'm pretty sure it will not do its thing properly so response perfect let's save this let's go back hello yeah uh we need to go to posts right so let's go to posts so what it's doing it's like pre-loading stuff and it just giving us back in the component right now we haven't done any loading we will do it right now but this is just I want to show how it works now let's go ahead and set react query up now this is going to be a little not do pig friendly but yeah if you want to see a video on react quy I have it in the description below I I had made a video on react query just a few days ago so feel free to have a look so how do you set up react query it's PR simple you need to do const query C you need to create a query C so is equal to new query C and you need to import this actually from react um sorry react query so import I can't type today from 10 stack requ perfect and now what you can do is you can simply have a query CL provider I I also need to import it perfect I'm just going to cut this from here which is the actual router and I'm I'm going to have a query client provider perfect we're just going to pass in the query client inside the query client provider and now what we one thing what we need to do is like we need to pass in context here and in the inside the context object we are going to pass in the query CLI something is wrong and I don't like it oh yeah perfect now every route will every route can basically access a curricle that's what it's doing but for that to work you need to change the root you have the create root route we need to actually change it so that it has the context with it so we need to create root route with route with context now everything we'll just read out just uh one simple thing just cut everything from here just have a function and then just paste it here it's pretty simple and now we need to actually pass in the types for everything we pass in the context so we need to have uh oops not a question mark and here we can have a query client and this is of the type of query Cent perfect now we can access this um context anywh we want why did we create a context let's see so I'm going to do something like hold on um yeah so here in SS uh in actually in the SSC folder I'm going to create a new file uh hold on I'm just going to create a new file why we don't even need a new folder I'm going to call it fetch posts. TS here we are going to set our query up uh if you don't know we are going to call the Json placeholder type code API which gives us a lot of dummy data so we will get data in this format uh which I already know export type post this will have ID number and string so let me just copy it let's not spend a lot of time perfect and now we will have a function that will get this uh this is a very basic fetch call so I'm not going to spend a lot of time just typing it out here but what we are doing is we are just calling the API uh if you don't know this is a very famous dummy API and when we can just get the data we are just using the type we are just telling it the type that it contains an array of posts and then we are running this line because we want it to wait 3 seconds before returning data why are we doing this because later we will see how the loading works like uh when you're using loader there is no specific loading screen but if you want a loading screen I use this to demonstrate that so we are just going to leave it here so now we are going to have a new function so export function post query function uh actually I'm just going to say query options like forget it query options and return actually I need to rename it because it's the same function name so I'm just going to call it post query action query option and return query options and we need to import it from theact query and it's the same thing now the way you interact with react query you need to pass in the query key uh here it is posts and whatever if you're using like some kind of key you need to pass in here as well and you need to have a query function for me it is get posts perfect and uh yeah we are basically done with this file now we can simply use uh this function to call so let's go back to our which was it it was post right so let's let's make the loader function now uh let's remove this and what we want to do uh we need to get a few things here first of all we need to open this and we need to get the context and out of the context we need the query client and now we can simply interact with the query client which we created earlier we going to use create client. ensure query data so that means that it will fetch the data and it will ensure that we have the data before moving forward and we are just going to pass in the function so post query data uh sorry post query options which will be actually an instance of query options in uh react query I think yeah that's done now it's crying because it's not expecting the response we needed so this is going to be post and we can start working with it uh as you remember the response was supposed to be an array of post so this is an array if we even over report it it says that it's an array of post so what we can do is we can simply do posts dot do map post and uh we can um have a div with key as uh post post. ID hopefully it works yeah and inside this div we will have yeah U post. tile post. body I'm going to turn it to I mean it's fine yeah whatever so let's go back uh something went wrong post do map is not a function what about if we reload this interesting it is supposed to work though uh let's see if there is any error here I'm going to restart the server oh yeah remember the 3 second delay we added that's the result of we are seeing a entire wide screen just for 3 seconds I want to show you this like if there is a API call which is taking too long you don't want to don't want your users to like face a situation like this where they like have an entire wi screen so that's where you use a loading thing so you can use a component for loading we are just going to use Simple Text so what you can do is let's go back to the code and here we can have pending component you can have different components actually I want to show you so you can have er error component pending component not F component which is 404 so if if it's like something you interested in but we only going to look at pending component and we are simply going to pass in a loading div uh you can go Fancy with it you can pass in like skeletons and stuff but whatever so if I just reload this you will see the initial shell loaded first and now the loading thing is happening and the loading thing goes for like 3 seconds and it shows us the data which is got from the API which is pretty cool I think this is more than what I could expect from a router so yeah that's it for this video this video became a little too long but I think I covered most of the features for the file based router yes there is actually one more rter which is a code based aout which we haven't even touched in this tutorial but yeah if it's if the video goes too long if you want to see me make a video on code based router make sure you leave that in the comments below and I will make sure to make it but the reason I chose file based router for this tutorial is because it's a good change like all of the time we have been using react out adom and it doesn't have a file based routing option out of the box you need to do like some kind of uh configuration by yourself to make it work but I think tan stack router like it it supports it out of the box just we just saw right now right uh so yeah that's it uh make sure you click the like button you hit the Subscribe button you share this video with your friends and uh do all of that stuff if you have any suggestions for any type of content make sure you leave that in the comments below our channel is growing faster than ever and I'm really happy about it so thank you so much so yeah that's it for this video I'll see you guys in the next one bye

Channel: Atharva Deosthale

Views: 2,190

Keywords: programming, programmer, bug tracking, reactjs, react, react tutorial, react router dom tutorial, react router, tanstack react router, tanstack router tutorial, tanstack router, react router tanstack, tanstack course, tanstack router course

Id: 3KvNh7fFio8

Length: 39min 35sec (2375 seconds)

Published: Tue Feb 13 2024