React router crash course

all right moving our journey further into the react ecosystem hey there everyone my name is AES and welcome back to another video this one is also going to be a bit relaxed chill out enjoyable uh slower guide on exploring another Concept in the react World now what the concept in the react is single page application that means there is no pages in these application it's just one page and the whole idea of the react is I'll take the component unmounted in place of this I'll Mount this one so the whole idea is to manipulate the Dom as much as possible when you actually say I want to go into register page react never goes anywhere it's a single page application it removes some of the elements from your homepage and injects some of the react uh register page on there it removes the register page and injects the login component and once you are successfully logged in then it removes that and gives you a dashboard just right there and your page never ever refresh but this is not ideal for a regular user regular user doesn't really understand and we cannot train the entire world population how to reuse the internet just because we have designed a new framework or a library so the concept of moving users onto different URL like register page login is so common that if you don't do this people might think that it's very suspicious and it's not really a great thing for the URLs and the safety precautions and that is why we need to figure out a way that how we can artificially inject the routing so that the URL looks great and user feels like they are moving onto Different Page although it's just react at the behind the scene it's just a single page application and yes everything happens artificially that is just a simulation being done that you are onto different URLs your page will never refresh still the react Concepts bringing in the components injecting the components and all of that uh so we'll be learning one such way of doing that by the way this is a core react course that is why we are discussing about the routings uh by the way on my channel uh you will find there's a nextjs playlist separately available so in that we don't discuss too much of routing that routing is different and by the way in case you are just interested I do have a separate video on my channel in which I have showed you that how the next year's routing can be designed customized y pure JavaScript how the react router works uh anyways let's move back so in this video first let me show you what we are going to build and then I'll give you some of the con concept of how to study the documentation and figure out things on your own uh with the react router Dom that is the library which we'll be studying so let me first take you onto the screen there we go sorry we don't have any dark mode for this one but this is the application that we'll be building uh luckily you don't have to worry about CSS I'll be giving you some of the files I'll show you that as well so this is our homepage and I recommend you to notice the URL this is the homepage when I go on to about page this is slab so this is simulating that you are moving on to the next page but end of the day this is just react our navigation bar never changes our footer also never changes they stay exactly the same so if I go back to the home navigation bar remains exactly same but our URL changes a little bit so we have a homepage about page and a contact page that we have and similarly we will be having a GitHub page but the GitHub page additionally will do something different the GitHub page will show my photo as well as my GitHub count and we'll see that how we can optimize it through the react router Dom which is Library we are using and for every single time we have the application going on like this GitHub and about we'll also see how we can grab some of the URLs and whatnot there's there's a lot more that we'll be studying than just being shown on the website itself all right and the package that we'll be studying is react router Dom it's available on react router.com it's by the remix team made by remix and what we'll be doing is there are a lot of ways how router actually evolves and especially the version six which we are at the time of the recording video this is the newest one we'll be using that one only but I'll walk you through how you can actually explore the documentation otherwise my channel is always available for you to help uh but we'll be seeing that how we can use the six version we won't be talking about the five at all uh we'll be seeing that how we can pick up different variations of the router we'll be using the create browser router and the whole idea is to study this piece of code so that we can load things on our own and can design the routing for this application this sample application which will give us the entire idea of how the application is built or should be built and all of that we'll see some of the optimization task and techniques and whatnot so everything will be pretty nice up there all right uh enough of the talk uh let's go back onto this one and by the way one more thing uh if you'll go onto this one so I have a repo on my GitHub account github.com shry you can find a repo with the name of react English uh because these videos are in English and you can see that there is uh react router notes. MD the file is available for you this is a markdown file which will help you to actually grab the components like for example for the header part or the navigation bar uh this is all the code which has nothing to do with the react routing majorly it's just a CSS uh similarly in the footer if you check out the footer this is just a static footer we just need it to understand few concept it could be just one liner but nobody gets impressed with the oneliner text that's why we are actually giving it to you so you can find the footer component just copy and paste it and then similarly we can have home component and contact us page that's it uh GitHub we'll be designing on our own so that's the basic part of it so let's go ahead and create a fresh new project and work with it okay uh let's grab and there we go okay so first of all let's kill this we don't need you and let's go ahead and work on with this just give me a second I'll allow align the things and remove this one let's start a fresh one and we'll say npm create V not react and this one is going to be an introduction to just the routing so we'll be calling this one I guess the seventh application that we have so 07 and we'll be saying react router package name is same we'll go with react and JavaScript all right so this seems good now we need to go inside the folder but as you know I prefer to actually right click and open the integrated terminal that way I'm always into the root so I can just run npmi to install the application and we can actually go ahead and move on to uh the browser itself so let me go ahead and get into the browser and how we can actually install this so there are main concept migrating all of this let's go on to getting started and there should be getting started guide tutorials uh yep the project install just get me the npm install command or I'll do it myself okay no examples FAQ main concept okay I understand the main concept just give me that path okay uh probably it's not going to be it's nothing it's a react rodom so I'll just install it so npm install it's react somewhere it is I'm not able to found it react router that a very famous package if you anytime working on the react this is the package you'll be dealing up with that now in this package entirely all you have to do is go with the main concept this is really the essence of how to understand the react router what happens how it happens and a lot of essential things are mentioned in this one so how you track the URL how you track the location forceful although we'll be studying a lot of it especially the router inside when we'll be building a mega project finally in this series so all these things like client side rout routing the location State and all of that will be taken care there but if you have time go ahead and go with the main concept some of them we'll be studying here like the path patterns what this is how to grab the URL perams Dynamic routing we will be studying in this one but definitely uh this is a very rich guide uh these kind of concept these all will be taking care of this uh but it is always a good idea to actually go with the main concept documentation this is the part where you study and you read out the stuff okay moving back so now everything is installed let's first go ahead uh we'll be needing Tailwind as well uh because if you look out the classes and all of that yes there's a lot of Tailwind so let's go ahead and install the Tailwind as well one more time in fact a a lot more time will be coming up in the future as well okay so this is what we have as a tailwind and we need to actually copy the content I'm pretty sure you might be just kind of memorizing this at this point of time okay the content will be replaced save that and go into uh main. jsx no index.css remove everything and we be grabbing these ones copy them and paste them up here save that we don't need anything into the app. CSS as well just remove everything we won't be needing we won't be using actually the app itself okay further uh let's go ahead and run npm install npn run Dev npm run Dev and that should be up and running on my system there we go basic uh since the app.jsx is anyways getting loaded let's go ahead and at least grab some of the values out of it so we'll be saying H1 uh react router react router Dom and we'll be saying let's add a class name and we'll be saying BG Dash uh what H green suggestions yes BG green 300 let's see yeah at least our Tailwind is working all right we won't be touching this thing here uh we'll be getting started with couple of routes and folders and uh basically trying to get a feel of how the entire thing actually works so first thing that we are going to do is there's always components or some people call it as Pages totally depends on you how you want to call it we'll start by calling this one as component eventually as we go into the mega project we'll be designing components and Pages as well but these are just file names nothing really uh bothers us so we'll be calling this one as components and this is just a directory structure each one each instructor is going to give you their best or their practices which is being used in their company uh we'll be creating a couple of folders first and then we'll be going through with that first of all let's go ahead and call this one as header inside the header I will have a new file and I'll call this one obviously as a header. jsx now nothing much in this file I'll just say this is a div which says header that is it absolutely that nothing more than that now similarly in the component there will be a new folder and we'll be calling this one as footer inside the footer will be having a new file which we are going to call footer. jsx there we go RFC we have just footer this will help us to understand some of the main concepts of how things are actually being done or how things are being laid out all right now the next thing that we are going to do is once we have these headers and Footers we will be replacing them with the notes that we have because if you remember uh this is where actually our component comes up this is where the header goes this is where the footer component goes and we'll be talking about them as well but right now this is all what we have now after this what we're going to do is uh this component we'll be closing it down in our main directory what we're going to do is we won't be using this app.jsx although you can no big deal there but I'll be creating one more file inside this which will be directly known as layout and this is a common practice the reason for creating this file is in our application you'll see uh that especially in this one that the header always remains same the footer always remains same only the inner content changes from home to about and all of that so we need to figure out a way that we don't have to repeat ourself that often we just want to grab a header should always be there footer should always be there and we'll be just injecting the content in between that is a common practice uh you'll find this exactly same pattern being used in the next shs and lot more stuff so we'll be using that practice exactly here so again RFC uh react functional component which gives me a layout exported that's it but what additionally we can actually go ahead and use the first concept about this uh which you'll be using is known as Outlet this Outlet is a special thing which is uh coming up from react router Dom remember so far we have been using just the react or the react Dom but this actually comes from react router Dom the advantage of this is that I can go ahead and return some special things first of all let me import them I'll go ahead and say I need a header let's just say header comes up like this I also need footer footer also comes up like this uh by the way we can export these components into index file as well that's totally your uh your call you can go ahead and do this now here what I'll do is I'll remove this I'll inject just the fragments just like this and I'll say there should always be a header all right and there should always be a footer so there we go and now what I'll do is I'll inject a special element that is given to me by the react router Dom and call this one as Outlet uh it needs to be always called as Outlet there is no other name for it and this is something which actually gives us this capability that hey this will always be on all the pages this one will be in all the pages this is designing the layout of the application now what's inside the header what's inside the footer that's not our call but they will always be there and whatever the information that you are using uh you can actually go ahead and use that but the main question that we have is that how it will know that we are actually doing this because right now if I just open the application and I run this this is not going to work so it's already running we don't need to worry on that part if I go ahead and open this up in the vit uh it doesn't take place it doesn't actually does anything uh the reason for that is in the main. jsx or whatever your file is in your case whatever you're using uh you actually still serving app it doesn't have the configuration which is required to actually have this router and this r router has couple of ways of how you can actually do the things I'll show you both the ways which are actually mentioned in the documentation so the first thing that we are going to do is keep this as it is we don't want to touch it initially but we want to create a router and this is the router which I showed you initially that comes up from this create browser router there are multiple types of router that you can use but we'll be using this create browser router and we'll try to create a path like this I'll show you this syntax and there's another syntax as well I'll show you the both uh you can pick up whichever you like so we can go ahead and create a router so router and that router will be created by create browser router so again create browser router comes from the react router Dom it's nothing it's a function but this is a function which doesn't work alone if you look at the documentation this function actually needs a route provider as well but it's not just the route provider you can see there are lots of ways of how you can actually have the route provider static route provider uh create a static Handler there are a lot of ways browser router so this documentation is quite in depth and there are multiple use cases for each one of them I'll show you the most easiest one that what accompanied you need to create this uh one and what we'll be doing is uh simply we'll come here and we'll take this one as create browser router oops create browser router is already there and we need create route elements yeah create route from elements yep uh it's a little bit difficult to remember this one but as you'll do a couple of more projects you will be uh familiar with that so once we have this create browser router then inside this you can go ahead and use this which is create browser create routes my bad create routes from element this is again a method this is again a method no big deal there now inside this uh there's a syntax that you have to follow so I'll come back here you need a special element uh known as route and this route is obviously going to come from the react router Dom and this route actually works like component itself so just like we saw that our empty components can have headers and Footers and we also saw that headers could wrap up inside Footers and all these elements so just like this route is nothing it's just a component so notice like this is how it works so just a basic element nothing more than that component but this route actually takes couple of parameters and based on this how it works it works on this kind of a sandwich model that we have so we'll first of all say that hey everything will go inside the path of a slash and what is the element that you want to load every single time you have to follow the same syntax you have to tell it a path and what element to load in that path element simply means what components you want to load in my case I'll just say hey element that I want to load in this one I'll give it like this I want to load an element known as layout and there we go self closing of course there we go now once I have done this now things will actually take place and instead of having this app we want to use this router inside one here so there's again a syntax a little bit Syntax for this one as well uh we now don't want to use this app we want to use our layout and want to load everything inside it in fact if if we have the app we want to load this inside the layout itself so that the header and footer always remains so we have to remove this here uh this one goes away this one doesn't load directly in fact we go ahead and use a router provider here again router provider comes up from the react router and the whole idea behind that it's a self-closing element you don't need to just have the ending one and inside this you provide just one pram a router which is the router Router is the property and is the router which we are creating uh make sure the router provider is getting uh operated and is being taken care once we have this this now what you'll notice is we have this header and footer since we haven't provided any Outlet to this one that's why only thing that's loading is header and footer now in in this one you can add as much as you like now let's take care of this one here a little bit since we have a couple of paths to work on with this one so we have this route element and I told you this is like an element like a sandwich that we have we saw the sandwich kind of a thing here as well and we can actually use that you might have seen that this is a opening this is a closing one inside this you can add as many as you like similar to this we have this one but right now the path that we are serving is this one so inside this you can have as many routes As You Wish further so these route uh these route could be self closing or could be the sandwiching one like this one or you can have these ones as like this self closing now here's the interesting part first of all what path do you want to load in this case I want to load a path I'll tell you in a minute what path to load single codes double codes whatever but I don't have an element in this one to load so what I'll do is I'll quickly go ahead and create another component in this one so right click and we'll be creating a new folder let's call this one as home doesn't really matter we'll be using the boilerplate code and we'll be saying home. jsx and again RFC that's it all what we have is a home text being literally written now inside this I I don't say anything I don't say a slash or anything further because everything now happening is after the slash that's what the meaning of this first route at line number 10 is now what element do you want to load I want to load an element which is home so I'll just go ahead and say hey uh give me an element which is home and self closing now when I go back notice here the home element gets loaded so that is the advantage of this one in the basic layout notice here I'm actually at the slash so this is technically slash which is where I'm home is loading now let's just say for an example sake you want to have a r router which says about so again first create that component itself so we'll create a new folder we'll call this one as about and right click and create a new file let's call this one as about about. GSX of course and RFC nothing it just says about literally nothing else you guessed it right now after the slash on the Home Route this works but I want SL about to load that component again go back here and simply say rout again this will be a component so route self closing could be fine here and then simply we will have a path which is going to be like this this one is going to be saying at this time we need to change it as about remember we are saying about here but this about is after the slash because it is sandwiching that one so sandwiching concept comes up here so on the homepage we have given uh a a ray out a layout a route here too too much difficult to spell uh here we are saying that on the same level on the same hierarchies after the slash if I write about remember I don't say slash about otherwise it will be twice I just say about what element do you want to load the element that I want to load is going to be like this and this one is definitely going to be about and there we go self closing so now technically I can go on to slash and I can just go ahead and say about notice here header and footer remain same but my about changes so I can go back this is home so this is the whole idea whole concept if you want to go further into this that I want about and then after that uh some slash or something like that uh then obviously you can go ahead and say that hey this is my about and slash this is where I'll be loading this one so notice here I can still go on to slash about and it still works if you want to have it like this again use the sandwiching concept so in this case I'll just go ahead and say uh route there we go and we'll end this one oops my bad this one needs to go like this and we don't need this one my bad there we go so now we have a closing one closing uh partner of this one now I can go back and again start writing the elements whatever that element is uh this could be about and this could be company and I can load any element whatever I want so just remember the concept of these sandwiching so one things can be inside it whenever you need a further drill down path you can do this if you don't want to do this just use a self- closing one that's also the same so you get the idea how the concept actually works all right so now we know the basic principle of how the things are there there are couple of more principle that we need to actually go ahead and work on with this and we need to have a small discussion on this one let's go on to the home not home header header this is where we'll be working on so again we need to copy paste some of the CSS for this one uh so we'll be grabbing although we can just goad ahead and grab directly all of this we have the header at the very top we'll be doing that but there are some elements which actually requires your attention into this part so let's go ahead and grab remove this one and we'll be having a simple header just like this it will have a class name and I'll obviously copy and paste the class names this is the part where it's little boring but don't worry there are some interesting features here which we want to discuss then we have a nav which we are writing again class name and again the class name will remain same so copy and paste that so now that we have nav inside the nav we will be writing variety of links now your first intention would be just to use a tag this is where things can go actually wrong so I'll just have a div another one here because that's how we laid out while designing this so I'll just have the class names copy that paste that up here and inside this div we have all the links what you saw earlier on the web page uh like here home about and all of that so they are just obviously they are just uh links all inside this one so we'll be using that now the first intention is uh always go and use the a tag and just write this remember the a tag the whole idea behind using the anchor tag is to move on to different resources when you use a tag the page actually reloads it remounts because the control is given to the browser and the Dom which is in the browser itself we don't want that because pay should not reload it's a single page application and that is by every single router no matter it's in nextjs or react or wherever it is it is giving you some ways of navigating things because remember this is all a facade this is not real this is just a simulation of moving to slash about and wherever it actually never goes there so that is why in every single time you'll find something known as link or somewhat similar to that which is actually coming up from as you noticed here a react rodom remember it always comes from react rodom or somewhat like that and we work through that so in this case we'll be just saying that hey uh we'll be having uh a link and again this could be a self-closing one or you can just go ahead and close it like this so I can just go ahead and say SL link like this again it could be self closing it could be like this totally up to you now in this link what do you want to have uh we have just an image with the logo or something like this so in the image part we are not talking that much but yeah we just added an image or something like this but notice here this link is pretty interesting this is not your a tag it doesn't have an hre it has rather a tag of known as two and this two will take you wherever you like to go so this is the interesting part where you should pay attention so if I go back up here notice here this logo uh comes up here so simply go ahead and works on with that we just found a random logo on the internet and we worked on with that now similar to this you can actually have more of this in fact now I can go ahead and bring all of this header component up here so if I just go back here copy this exactly same thing so I can just now replace and talk about it paste this and we have exported default all of this but the only thing that is still required is to import the links and all of that otherwise it will yell at you so go ahead and import uh react do we need react I don't think so we need react but still if it is saying I'll just grab it uh we need link definitely because we discussed about it and the link is going to come from react rodom and not only link uh let me show you a couple of more stuff so the link is actually one way of navigating from one place to another place so notice here mostly the link is used but there is also a nav link being used so nav link is also a part like that so navigation link uh right now we are just using it as a basic but nav link actually gives you a couple of more features like on what page you are and what values you can actually use so we'll see some of the variations and versions of that as well but right now we'll just import that and leave it remember link is not the only way of navigating we have the nav link as well and we can read about the documentation of this one if they have any Global search I don't think so uh let's just say components you can see the nav link here and what you'll see in the nav link uh you can find out pretty easily what class is active and what ends and all of that so notice here uh it says two messages so the link and nav link almost same the two section and everything is uh almost same the only thing additional with the nav link is you actually get this is active and is pending and all of that so why using this is active uh which whenever you use any class name or any Arrow functions like this it is available to you directly uh notice here they also say this a nav link is a special kind of link that knows whether it is active or not so when you go up onto the applications like this and when you say that hey uh this page is active or this page is active just like that that whole functionality can be done via the nav link so that's why we have this nav link uh all right uh by the way notice here this is exactly what we are doing uh what whatever the values are active and all of that uh we'll talk about that uh later on in the some sections where we'll be having in fact we can actually talk about this into about whatnot so this is get started then we have couple of nav links on the home actually we have just one on the home we can design it right now itself so let's just say on the home uh what you can do is you can just add couple of more practices and what the text you want so for example now we are in the nav Link in the class name itself since we are using a call back this is the syntax exactly they are also mentioning it so we are not doing anything special in the class name property we have the access of this call back and then we can write all this so this is exactly what we'll be also doing so in this one we have the access to this is active remember this needs to be exactly as is active or is pending so we don't decide the variable name in here so we have this is active and by the way uh one more thing which usually I also forget this is active needs to be extracted as a property like this so yeah I also make sometimes this mistake so let's go ahead and keep it up like this and now you have access to is active now based on is active we can decide whether the color is going to be gray or this one so we'll just actually cut this out we want to cut this one out and once we are cutting this out we can inject the JavaScript again and uh by the way m dollar sign is missing yeah now we are happy okay now based on is active we can do a question mark and etary operator here if it is active uh then we can go ahead and use a text of uh not this one text orange so we'll just say text Dash orange we'll be probably using 700 version of it that's what we used and here we can use a text- gray 700 Gray 700 no suggestions there we go no suggestions strange uh anyways we can just find it out later on if we are doing any mistake and by the way this needs to be wrapped inside the quotes because it's a class not a variable class I mean to say uh types uh Tailwind class so that is all what we have and based on this we can have a nav link which can provide you whether you are active or not onto this one so nav link should be refined so now we have on home but if I go on to about so we have the home and if I go on to slash about uh this should be technically going away we shouldn't be having this link as if it is true then it's 700 if it is false it goes like this B gray we'll we'll see that how this actually works and how we can actually have more links onto this one uh this one is nav link we haven't mentioned the two we have to mention that otherwise how it will work and we'll be saying that hey you will be on slash so now it will keep a track off there we go now if I go back to home it's orange but if I go back to slash about we are not active there we go told you simple okay now we can have multiple of these allies and can Define home about whatever you wish so I'll just copy and paste from Li I'll just duplicate this and this one is going to be slash about and there we go now forgot to change the text about save that now we can travel to home we can travel to about and similarly we can have more of these uh so if I remember we have home about and we will also have the contact so I'll just duplicate this one I hope you remember the shortcut for duplicating in vs code if not right now is the good time to find it out about okay uh home contact contact this one is going to be contact uh we also will have probably GitHub as well uh we be having some fun with GitHub as well all right copy and paste that this one will say I'll go to GitHub component wherever that is all right so now we have home uh we have about although there is nothing inside the contact so this route doesn't uh is there so we need to actually Define our 404 route as well can work on with that but at least our home and about component are there and we now know about the nav link which is a special kind of a link and we are aware of how things are there now with this we can actually go ahead and move on and work with the footer which is super easy now you can go onto my notes and this is the footer just scroll it on the all the way to the right and you'll find this copy button or you can manually copy and paste that and all we have to do is paste this all here since we have link uh in this one so just go ahead and fix the errors let's first just import the react import react and then we'll be importing the link and that link is from react router Dom technically we should be all good now so we can see at least a home and about but our footer is coming so it's looking nice as well uh apart from this there is no big deal and no facade about it similarly we have uh home component as well we can go back and replace it with the home so again it will look just a little bit beautiful nothing more more than that and home select all replace it I don't think so we have anything in this required uh let's just try this save this and go back and do we have some links yep we have some links in the home as well so let's import that no big deal in fact we can actually copy paste footer yeah let's just copy and paste all right let's come here and there we go should be all okay now there we go so we have homepage so we have learned how we can design that home about uh and whatnot so I'm leaving this contact page to you as a simple exercise all you have to do is go up here uh we have the contact us page as well and go ahead and work on with the contact us page about us page about I can I can do this fun for you okay so about is here uh we'll be replacing it with here and we'll be importing the link if we have I don't think so we have link from react router let's see if we have about yep home is looking good about is looking good contact is uh for your exercise maybe maybe I don't know uh we'll try to have some of the work with the contact and user and whatnot okay uh one more thing that we'll be doing is we'll be creating another component uh let's go back onto the code side of it and we'll be creating another component let's call this one as user because I want to show you some more uh ideas that you'll be using let's call this one as simple user and we'll be having a simple layout here new file that will be user. jsx and just the basic RFC so we have a user now in order to make sure that this component loads somewhere we have too many files opened up I would love to close that in order to make sure that I have a really huge code base into the user in order to load this I need to go into main. GSX and how can I load a route which actually loads this one so I can just go ahead and say that hey I want to have a route and this route will be on going to whatever the path you ask me to do so I'll just say hey go on to user and the component or the element that I'll be loading here is going to be a user user it doesn't suggest me user okay I'll write that again I want suggestions okay there we go and in here we'll be saying hey give me user it doesn't give me user save that and probably this will give us issues uh it surely will I we'll just first remove this about because we don't want that the element should be user H it should be Auto importing that and we'll be saying import user from component user user jsx okay all happy now can we have another link for for the user itself uh probably yes let's go into the header header and can we have another Li for the user itself let's try this link go ahead copy and duplicate that this will be going to uh user and we'll be calling this one as user how easy that was okay now if I go back to the user okay I get the user now in this user first of all let's just uh central line some of the stuff we don't want it like that so we'll be adding some of the class name we'll be adding some of the background BG Dash orange suggestions uh we'll be using orange like this and we'll be saying text- black and text- 3X 3XL text- 3 command suggestions 3x no suggestions yeah text 3 XL and we'll be saying text Center just to make sure things are all good and okay at least they are visible we can even add a petting on y AIS of five yeah better okay so so far we are all good and we understand this part is there but there will be cases in your uh situation where the user will be dynamic uh so Dynamic routing is a very common scenario so for example the user ID is I cannot write it here uh something like 1 2 three or maybe username with a username of AES so I want to grab this path and this URL so that Dynamic capturing is one of the Core Essence of how you'll be using the route the way how we use it is actually simply go ahead and simply write something here which is Slash and then the colon is important this is how you capture anything out uh after the user slash whatever comes next to it you'll be able to capture that and then carefully name this parameter this is a placeholder user ID this could be just ID this is could be product ID whatever you want this could be anything like that but this is not job done because if you go back up here user definitely uh that's all good but if I go back so notice here the user now we are saying hey this is not happening because I don't know what to do with this uh this obviously will give us error now we need to go into the user and figure out a way that we accept all these things now in order to make sure that we have defined that this path is actually accepting the parameters and whatnot we have to use the params and yes this is literally the name and we call this one as use perams no suggestions use perams no no suggestions yeah that's bad and that actually comes from react router Dom okay and why are you having issues because I wrote const import there we go now all you have to do in this case is this used Pam is actually a hook we studied hook quite a lot and this is a hook that means it's a function nothing more than that but what this function gives us back that is important for us so it gives us a lot of things we can extract some information out of it what information to extract yes exactly user ID why user ID because we called this as a user ID in this place and after the colon the colon is a symbol that hey this will be going into use param and you'll be able to extract this with a key ID of user ID just right here now let's just go back what happens if I go ahead and get back uh it says Hey prop and Route error boundary okay looks like this one is okay but my main. GSX is having some of the issues let's go back on to main. jsx this one user path element is all okay should be all okay and let's also check the user I'll be exporting that export default user we are exporting that let me quickly check that why this is yelling at me all right so found the bug a pretty easy one uh probably because it's late night sometimes these things happens so again uh we are actually good uh in this case already uh the issue that we are facing is pretty easy actually if I go ahead and refresh this this page works but if I go onto the slash user or uh this one this doesn't works because we never defined the route that what happens when the SL user only comes we are only defining and are talking about what happens when the user slash and some parameters comes into that picture so the easy way to fix it is actually to remove move this let's cut this out and let's not make this one as self closing use the sandwich of uh concept that we studied about so we'll be saying that hey let's just go ahead and close this route now we can use the sandwiching concept and then I can use the inside the sandwich route which obviously will make it as slash everything is inside slash then we have user on the user we'll load the element user and after that if there is a colon which technically makes user slon user ID we will load again the user element so very basic uh but again sometimes these things do take some time to debugging uh so there we go we have this user and what additionally what we did is inside the user one since we extracted this user ID I just placed it here it's just a variable I am displaying a variable in JavaScript I'm not doing any magic here so when I go back here the advantage of this is now anything that comes up here in the URL after this whatever the dynamic route I will be able to catch this Dynamic route for example if I just have something like H here I can grab this this maybe uh this is something on the user page where you have some clickable elements and while clickable elements you are coming onto some get of user ID some a blog or anything so I can grab elements from the URL itself make a fetch request and get the data so this is the whole idea of uh doing everything that we are doing up here all right so now let's go ahead and work on with some more stuff which is also pretty interesting and A New Concept in this one actually uh nextjs also uses this same concept so we'll be working on with this one I hope the center element of this one how the routers and the dynamic parameter comes up this is all clear to you and by the way even if you don't put this one and directly put up this then the user route will not work but user slash whatever something will also work okay uh going back we need one more route to work on with this one so we'll go out of the sandwiching we are not interested in this one first let's create a new component that component will be again very basic uh but very interesting one actually let's go ahead and call this one as GitHub and inside this we'll be creating a component known as GitHub jsx of course. jsx again RFC that is it now in this uh GitHub and all of this what we want to do this here is just simply show some data into this one first let's go ahead and create this route that would be super beneficial for us so we'll be having a route route and there we go and we don't want this path estri this simply means when you have estri that means all the 44 found just load this element up here so now if we have this element make sure this is at the very end of it because they are evaluated on Case by case basis now if we reach out to something like uh something like contact uh which we don't have defined it just says not found GitHub which is not yet defined so it says not found so this is a classic example of if nothing cases so have you studied switch in cases yeah this is almost like that uh but before that make sure it is always at the end we also want to have this GitHub so we'll be having a route uh path will be GitHub and the element that we be loading is going to be GitHub yep bring this one in here and now we have this GitHub and let's uh modify this a little bit not too much but at least bearable so we'll have some of the class name let's grab first of all text to the center uh we'll be having a margin of four on all the sides background will be gray how much gray 600 is good enough text can be white and what else uh padding would be four on all the side and text would be large so 3XL would be good and there we go we have decent stuff coming up in here okay now we have this one now I want to fetch some data from the API itself and if you remember fetching the data data is not that hard and I can just visit this URL and grab some of the data and it's an object that is being thrown at me it's a public URL you can also go ahead and make a a fetch request there so as soon as this component mounts I want this request to be come to be fetched up to me and I want to use that so one easy way of doing that is uh have a simple data as my state so set data and we'll be using react. user state by default it will be an empty array object uh whatever you like to have we just have an empty null we'll have an array or maybe an object we we'll figure it out okay now I can use a use effect hook so use effect in this and there we go we have a use effect it has no dependency array so there we go and now what will I do here I'll fetch so I'll say fetch okay this is nice spiler plate but I'll write my own I'll simply say we want to fetch this URL if this URL gets a success so we'll say do then it will give me a call back I'll say let's call this one as response but response is in the string format I need to convert it into Json so let's have the response. Json okay then chain on one more then because that will actually extract the data and we'll be having again a call back let's call this one as data there we go call back just like this and we can console log the data as well as set the data into the data so there we go now the data is being set into this one and now we can extract some of the data out of this one okay uh let's first console log and see if this is all coming up when we hit this particular route right click inspect and console okay too much and we will expand this a little bit there we go so if I go back to contact and load the GitHub it gets nothing as of now because we are not using it technically okay uh time to actually use this data itself H interesting how we can use this uh once the data is actually being set as soon as the component mounts save this go back and now I can see I have this object H let's reload this one more time probably I didn't save that okay uh fill rule did you mean fill rule no all these okay uh these are just the CSS and Dom properties not interested in them contact GitHub there we go now I have this object which has a lot of data and probably out of this data because I'm console logging the data and I am conso logging this so let's extract some values out of it so what values can I grab first of all the followers count maybe followers there we go and let's inject the variable since I have access to this data and if you have studied this you know that I've actually gone through many times you can just extract what do you want I want just the followers count here so that's why I've just mentioned this and there we go I get the followers count so notice here we can grab the image as well should we yeah let's grab the image and I'll say I'll be needing an image there we go what is the source source will come up from data if the data has a aore URL and we also need to give a width of 300 all right so we have this image as well as all this data now here comes the interesting part where things will get a little bit more interesting towards the router I go into about I go into contact when I go on to GitHub that is where the request is being sent uh we cannot simulate this one as to come up after a few seconds but what you'll notice this use effect will only take place when this component particularly uh loads up on the page so contact when I go up here so this will make a fetch request now what if we could have done this a little bit better uh can we optimize this this is already very optimized but what if uh there could be Advanced stage of this one like for example I'm going into contact before clicking on this I keep my mouse over for probably a fraction of second milliseconds but then I click on it the same thing can be used for the advantage nextjs does exactly same when you actually pull your mouse over over this one it automatically sends a network request to load all the resources that you require and then when you click on it the things are already available for you now how can we do this in this scenario with the react router Dom in the next years it happens automatically behind the scene but how we can actually do this one up here now doing this all of this thing is actually super super easy let me show you how this is done first of all we don't need this data and all of that this was just to show you that how regularly we do this again a good example exercise we'll just comment this one out and we'll write this thing again you can usually there's a uh case where people write these kinds of methods in the component itself but if you wish you can separate that out as well all you have to do is export a a a kind of a method we'll call this one as GitHub info loader uh and this one is going to be a simple call back just like this but the only method only Advantage we want to take care here is is we want to make this request as a sync previously we were using uh the fetch in the then syntax you can use that as well but I want a Sync here as well uh so what we'll do is we'll obviously await and we'll do the fetch because I don't want to continue if this is not there and the fetch is going to fetch the same URL no changes there we know that this works and let's hold the response into a variable so let's call this one as response so there we go and now all we have to do is return return this response we don't need to await this here response. Json okay now uh notice here we are not we are just responsing returning this response we are not having this data and whatever that is the good thing is I can return this as it is now once you are returning this then the next step actually is almost in this file but we don't do this here because this is not the data flow understanding the data flow is important once you done with this this method actually first gets loaded into main. jsx where you're actually having this routing so this method needs to come up here let's go ahead and since the method actually exist in the same component that is why a lot of people prefer to have this here we can just go ahead and say uh this one is going to be GitHub infol loader whatever the name is and then once we are done with this we don't actually load the GitHub just like this we actually provide additional property no we don't need to use the sandwiching but we need to provide additional the path will be same the element will be same but there is one more element or prop which is known as loader this loader actually takes a method that whatever the information you need to fetch calculate whatever you need to do just get me that method first so that if somebody is trying to load this route I can do some of my Advanced pre-processing on it once you done with this the next question in your mind would be okay we created a method in this file we exported gave this method to this guy but how can I get the data from this whole method I have returned the response but I need this uh this is a common mistake that a lot of people do this hey since you have exported this here let's use this method and grab the data no no you don't do that that's not a proper way of doing the things in this case when you want to have this you actually use a hook which is given to by to you by react router Dom so let's go ahead and use this and this one is coming going to come up from react rouon the name of the hook is pretty simple H you can guess that use loader data yeah the property name there is loader and here is is the use loader data since this is a hook you obviously know how to use the hook so it's a simple use uh use loader just like this it's a method there we go and you can extract data from it so call this one as data since all the variables that we named them as a data. follower so this will have that object and you can extract the information so now uh technically it looks same that hey we have contact about now if I go to GitHub it technically looks same but it's actually doing uh a lot of pre-processing for you in the smaller application like this it is little bit difficult to find that it is adding some value for us but trust me it is adding a lot lots of value and this exact same pattern you don't have to use that much of hooks and stuff is used in the nextjs as well they also do a lot of pre-loading and pre-processing of data uh a lot of fun stuff is there but by the way this whole thing is actually available in case you want to use classic react in some of the applications uh you can actually go ahead and use that by the way there's a lot of things you can go ahead and work on with this one there's so much of routes available a one that we studied is use perams so user ID use perams this is exactly what we studied uh we have so much more use submit use route there's there's so much of advancement in fact there could be a separate course on this in itself I'll try probably in the future to create one such if you have if you really want this one to happen let me know in the comment section I would love to do this as as a course inell so uh this is pretty good of one uh crash course on the react router all the advanced things which you probably are going to need are covered up yes there are still more uh something like forcefully pushing the user onto some page once we have logged in and all of this will be covered up later on when we'll do some of the mega project but I think that is enough that is more than enough for you as a react router crash course uh that's it for this one uh make sure you leave a comment in the comment section I would be really really appreciating that that's it for this video and let's catch up in the next one

Channel: Hitesh Choudhary

Views: 24,306

Keywords: Programming, javascript, reactjs, learn react, complete react course, front end developer

Id: eLT2uiV7D8g

Length: 55min 54sec (3354 seconds)

Published: Wed Oct 11 2023