React Router v6 in depth guide

dear react router team seems like you guys are  hanging a lot with the google's android team   so much of the deprecation so much of the braking  changes less of backward compatibility not a good   influence my friends hey there everyone Hitesh  here back again with another video and in this   video we are going to go ahead and get an  in-depth guide of react router version 6.   now jokes aside react router version  6 is one of my favorite update   now you will be absolutely saying the same  what i'm saying about after watching this video   now so far we have been using react router till  the version five and we have been just using it   that's it it just works right out of the box but  from version six you'll be actually embracing   what all it provides so many of the hooks so  many of the flow that actually makes sense   it's all in all right direction so definitely  a big shout out to the team for working so much   hard on to this one and taking the project in  this direction which feels absolutely reacting   now but obviously taking things and taking this  entire project in this direction means there are   a lot of breaking changes in case you have been  using version 5 you can still continue to use that   but if you are upgrading to version 6 or you are  getting for the first time in the version 6 there   are so many of the breaking changes which all we  are going to talk about in this video so how we're   going to proceed in this video first you're going  to hit that subscribe button and the like button   yeah that's very important so go ahead and hit  that and then we can move forward so in this video   i expect that you have no prior experience of  working with the react router anything in the past   at all we are going to create a very fresh project  in the react itself then we're going to install   the react router version 6 and from there we're  going to write absolute every single code line by   line so that you can follow along with me i expect  that you have no prior experience but in case you   do have you will still get a lot in this video  because there is a lot of changes up here by the   end of this video you will have full understanding  about the flow of the react router version 6.   in case you want to upgrade your existing project  you will have that knowledge too just tell me one   thing guys i was checking the stats of my youtube  videos so many of you watches the video but so   much less of the subscription what it's fun to  always search my name in the search bar and then   come up again here land up here you can hit that  subscribe too with all that now let's go ahead and   dive deep into the react router version 6 and code  it out welcome to the class on react router 6. two   important points here the first one we're going  to start by creating a fresh application so that   you can follow me along i will omit some of the  major standards in the industry that means i won't   be creating a separate file for the component  itself rather i'll create a simple function so   that i can explain you further so that you can  handle things on your own later on the focus   is on clarity on understanding the version 6 of  this react router so we're going to focus on that   rather than splitting the file and whole bunch of  that second most important thing is that please   don't panic out doesn't means that the router  version 6 is available that means 5 is all gone   no it doesn't work like that in the production  the updates are really really slow so it's going   to take probably couple of years so probably more  than that for the applications to upgrade or move   into the version 6. it doesn't happen that quick  the production is a serious issue and we cannot   actually afford our applications to crash down  or face some bugs so this kind of a migration or   upgradation takes time so in case you are having  a knowledge of router 5 that is absolutely fine   this video video will upgrade you but doesn't  mean that all the five knowledge that you have   gone is all gone you can still work on five  as of now now let's go ahead and with this   let's start by creating a fresh application so  first i'm going to go up on my desktop and i'm   going to go ahead and create a new directory  so let's call this a directory as simple react   router yeah that's fine let's go into this  one so we're going to go into react router   and here further down the road i would like  to create a directory which is going to be   uh react dash not react actually rather router  dash 6. yeah this this makes sense because it's   a router version 6. so let's go ahead and  create that and let's go up in here now here   we're going to create an react application so  we're going to simply say npx create react app   and make sure you put a dot here as well so that  it installs it in the current directory and not   some other directory it's going to take some  time so let me skip that by fast forwarding this that felt like eternity okay so now this is  all up and running hopefully everything is   good so let me do quick and ls and all of  the packages and files are available now we   need to install a few of the libraries  of course we want to play around with   router so we're going to go ahead  and say hey please give me react   router dom now by the time you'll be watching  the video you don't need to place at the rate   6 it should be out fully so it should by default  install the version 6 but just to make sure that i   am at least on version 6 i'm going to go ahead and  place at the rate 6. now here's the interesting   thing very very interesting thing if you're going  to watch any of the documentation which i'm going   to show you and we'll read that as well it  also says that when you're installing react   router dom at the rate six also go ahead and type  this command up here which is history at the rate   five now why is that now this has something to  do which is kind of a legacy now in the version   of react router the previous one fifth we used  to access history all over the place but that is   not now the case so let me walk you through that  how it works let me open up my browser here we go   so this is our browser let me close this guy so  there we go so into this one in case you're going   to notice any of the documentation or the tutorial  anything you're going to notice this command at   the very right up here that hey use npm uh add  react router dom at the rate six and history five   and they actually ask you to install this library  so in case you still want to have a support of   commands like history.push history.place go back  or forward you actually want to use that and again   it gives you all these options regular options we  used to use like history.go minus one history dot   go back and all these options are available but  in reality you don't need it you if you understand   the react router properly you will be able to  do all of this you don't need to handle one more   library in the application so we're going to go  ahead and move this aside i'll come back to you   later right now so we're not going to install this  one in case you're following the documentation so   this shouldn't take much of the time it's pretty  lightweight of a package not that much high so   we're going to go ahead and install this let  me fire up my co-data and from now onwards   we'll be working on with the vs code itself  do you trust it absolutely no problem at all   okay so let me expand this there we go nice and  easy this looks all good now inside the source   we have so many of the things going on we have  this app.js will keep it up and running and just   by the note sometimes i have seen couple  of issues so i'm going to go ahead and say   npm start so that i know that if the default  installation is all okay or not and seems like all   good so there we go let me bring you up here as  well because i will be needing you again and again   okay so this looks good and i'll push you here  there we go okay so this application looks fine   and working as a default one now let's go ahead  and change this one to something that from where   we'll be working on so let's go into index.js  now i won't be needing this much of the thing   so let me go ahead and remove this one and let's  go ahead and create our own app.js so what we're   going to do is we're going to start by creating  the very basics of that application let's go   ahead and call this one as home so i'm going to go  ahead and simply say come on not here come on here   just there okay so we're going to go ahead and  call this one as simply home instead of app we are   creating a simple home component itself and the  whole idea behind that now usually these functions   that all i'm writing are react components so  assume that they are they are being written into   a separate file itself and it is easier for us to  have everything in just one file again told you   i'm gonna be not following the standard practices  it will help us to understand a lot so let's go   ahead and return the stuff and in the return i'm  gonna go ahead and have a simple div and inside   the div we are going to go ahead and have an h1 i  guess i haven't enabled the emit yet i'll do that   later on let's go up here classic div and we'll  have a simple h1 which will be saying home route   there we go okay so this is the basic route all i  want to do is i don't like this app.js now i would   rather love to have a home component here so there  we go let's go ahead and remove this guy we don't   need it save that and now how does it look if i  go ahead and hit a refresh now an amazing home   route is available on our page so this proves  the point that yes i'm able to do all of this   now let's go ahead and work on the routing now  routing in case you have never worked on that   that's also fine i'll take you as the basic that  how everybody can understand it the very first   step in order to have the routing in available  for us this first step is almost very similar   we go ahead and bring some stuff from react router  dom there we go now what do we bring first and   foremost this entirety of the application the main  your home component whether you're calling it as   home component app component this one actually  needs to be wrapped around everything so let me   walk you through with that the first step that  we are going to bring in is this browser router   now since this is too long to say usually you  are going to see people actually bring this up   as a router so this is the step one now instead  of wrapping it around with all of this react and   stuff we are going to go ahead and wrap it around  with the router itself so let me copy this router   and remove this and there we go now since we have  bringed it this router this alone is not going   to give us anything at all so there are a couple  of more thing that comes up and these are recent   editions in the react router version 6. so we're  going to go ahead and say bring me routes and   also bring me route okay what is this route now  according to the definition or the architecture   of the newer version of react router 6 it says  that all of your route should be encapsulated all   the time inside this route so what this means is  i'll just remove this home component for a while   and i'll say that no matter where you're defining  your routes doesn't matter if this is in the home   page or any other separate component you always  and always needs to wrap it around with the routes   there we go and inside this route now further  down the road you can define your route   this is great okay one more thing i would like to  mention just right up front here we will surely   have a detailed discussion on this is something  like this notice here this route is a self-closing   component but these routes are just opening and  closing components no this is not like that you   can actually go ahead and declare the routes just  like that as well and we will be doing this this   is the new thing kind of a new uh thing that they  are embracing a lot in this so we'll come back on   to this one in a minute so i'm going to go ahead  and remove this one and 30 let's go ahead and have   a simple route just like that okay now what  this route actually takes this route takes a   couple of parameter the first one very familiar  one that on what part should i load this one   and there can be many parts like slash login there  can be slash logout in this case i'm talking about   the slash which is the home route now in case  you are coming up from the older version of the   react router you might be familiar with writing  component here but that is also gone we go ahead   and write simply element and in this element we  goes like this and then we pass on a component   itself now by the way you don't need to pass on  any component like this the functional component   you can directly write your jsx here so for  example if i go ahead and say hey i'm interested   in having a p tag and in that i just go ahead and  say test this is all this is all you got to do so   let me go ahead and show you that by going up here  and on to the refresh and it says nice little test   okay this is available but you won't be finding  much of the people writing gsx here this is   honestly not a good approach at all so i won't  recommend you to do so rather we will bring the   component from some another page or somewhere  else where you have kept your component and   then we are going to go ahead and work like that  in this case our component is just lied around   here so that we can actually go ahead and quickly  manipulate that and i don't have to move around   with a thousand different pages let's go ahead  and save this one okay i go back up here hit a   reload and there we go this is home page this is  really nice okay now i'm gonna go ahead and do a   little bit of the editing up here so i'm gonna  go ahead and make our life a little bit easier   i don't usually prefer doing that but i'm going  to go up here and i'll open this index.html and   i will go on to the google itself so let's go  ahead and bring in google and i'll say bootstrap   five now you don't need to do this i'm just making  all of our life easier by having some less strain   on the eyes itself i'm gonna copy this bootstrap  and i'll paste it up here uh just above the head   is fine for me there we go and inside this body  i'm going to go ahead and add a simple class   just for this one bg dash dark now what this will  allow us is to have less strain on our eyes if   i go ahead and hit refresh now this is all good  but our text is obviously gone that we don't have   this text so all throughout this entirety of the  stuff i'm going to go ahead and say hey wherever   you find the text go ahead and just make it white  yeah this will make our eyes less painful that's   it that's all what i have done this one okay so  let's go ahead and close this one we won't be   handling this one in case you don't  want to do this that's absolutely fine   now in this video we're going to have a lot of  challenges so let's go ahead and work on with that   now the very first challenge in front of us  is this home route is here okay that is fine   but i don't want to have a home route like this  one i want this home route to go somewhere else   so let's go ahead and say that so that's step  one we want to first create a new component how   we can do that we can just go ahead and copy this  functional component the reason why i'm having a   copy of this right into the file itself so that  i can quickly create more component and show you   the workflow of the react otherwise i would be  creating new files and stuff all around let's   go ahead and specially call this one as learn  i highly recommend to follow along with me here   please once you understand this entire tutorial  feel free to change everything and anything that   you see up here now this is obviously going to  go ahead and say hey this is a learn component   and we're going to have further down a simple  h 4 i guess h4 and we're going to go ahead and   say all courses are listed here so basically  what we're trying to make in this section is   uh we're having a kind of a replica of my website  in which a home component is actually at the learn   and then we have list of all the courses as well  as list of all the bundles this is the basic   priority that we are trying to have and through  this we are going to learn about the router   okay cool okay further down the road uh this  is all basics of it now the goal in front of us   is create another component which is going to call  as my apps you just told us we want to create it   slash learn yes we'll do that but first i want to  have another path which is my apps let's go ahead   and copy this route and obviously the path is  going to be my apps now what i want you to do is   that when anybody hits this route which  is slash my apps i don't want it to be   him to visit my apps i want him to visit slash  learn so obviously this step is pretty simple   the first thing is i should have a route  which should handle that particular thing   i know that i can do that by having a slash learn  and i have just learned that how we can handle   the component here so instead of the home i can  just go ahead and say learn but i don't have the   knowledge that how i'm going to redirect this  path which is slash my apps so in this case if   i go ahead and for a momentarily purpose if i go  ahead and change this from home to learn the both   of these routes are actually unlearned there  is nothing which is stopping me to visit there   so i can go ahead and say my apps and still it  says learn and if i go up here and i say learn   this also works exactly same so what is stopping  me to do so now you will find such a variety of   similar situations so in that case what we can  do is instead of providing an element like this   we will be bringing some more stuff from here now  one thing a side note the react router version   six is full of hooks there are so many of them  that probably it's gonna take like five to six   videos to properly explain them but i'll try my  best to give you a lot of idea about them it's   all about hooks here but this is not hook itself  this is another uh kind of a component that you   can bring in and that is known as navigate so  what i want to do is instead of having a pass   on a component like this i want to go ahead and  pass on a component of my own which is obviously   navigate let's go ahead and say hey navigate there  we go now this navigate is going to go like this   and we have to pass on that where do you want  to navigate so this takes a parameter of 2.   this navigate is almost similar to kind of link  but not really okay let's go ahead and work on   where do you want to redirect i want you to  redirect to a path slash learn okay let's go   ahead and save this one now let's go back up here  and say that hey it automatically redirected me to   learn but let's try and manually try to go to my  apps there we go i go up here and automatically   redirects me to learn now let's go ahead and  try to go back now i'm not able to go back   and if i click multiple times then i go back on to  the home route now why this is happening this is a   very interesting feature to work on if i again try  to go my apps and i come back it again come backs   but if i go ahead and try to say hey my apps and  again there we go so sometimes it's going to work   sometime it's not going to work like this but i'll  tell you the reason why this was happening in the   first time we saw the demo but in the second time  we were not able to see that the reason why this   is happening because the navigate the default  functionality of the navigate is actually to   to lay up whatever the route you're asking up  at the very top of it kind of in addition to   that it is almost similar to something if in case  you have worked with the mobile application that   sometimes you pop over the screen on top of it  so this is what similarly it is doing now in case   you want to truly redirect the person you have  to actually use this keyword which is replace   if you make the replace is true the behavior that  we saw the odd one that will 100 percent be gone   and also it will be an actual route of slash learn  it's not going to be added on top of any existing   route so this is what this keyword is and you'll  be using this quite a lot so now i can go ahead   and save my apps there we go and i can go back it  always will always work like that because it's not   laying anything on top of it okay so this is the  step one that we got up here now let's go ahead   and learn a little bit more so this is all good  seems good now in this learn we're going to go   ahead and add a little bit more of the stuff  so let me go up here and add a few links now   you can add a link with the a tag and href we have  already seen that but we don't do this much in the   react we actually go ahead and bring some another  concept up here which is known as link now why we   use a tag instead of the link can we use a tag yes  of course you can use a tag but the problem with   the a tag is whenever you use a tag it reloads  the entire page wherever you use it but in case   you use a simple link tag it doesn't it doesn't  reload the entire page and that's the whole idea   of creating these spa is a single page application  we don't want the page reload so this actually   mimics the functionality of that so i'm going  to go ahead and say this link just like that and   this link is going to go for courses okay fine and  let's go ahead and use it too here as well because   link obviously is like almost href there we go so  we're going to go ahead and say slash learn slash   course and let's duplicate this one this one  is going to go ahead and move on to bundle and this one will obviously go to bundle now i'm  going to go ahead and add just an a pipe here   to make a little bit of the difference between  both of them otherwise they'll be just butting   up together i don't want that okay so this is all  good now we're going to learn the different aspect   and different concept of that okay we are on to  the learn we have these courses and the bundle   a little bit not that much visible i can add a  css up here as well but since we are having a   bootstrap i think we should be able to do this  up here again this is just to make sure that   you are able to see these properly you don't  have to add these class names and stuff so   we're going to go ahead and add a class name up  here which is going to be simply text dash white   let me see if it is working and hit a reload  and it is working so why not to change these   text into the button itself let's go ahead and  since we have already introduced and injected   the bootstrap let's go ahead and say button  dash this one is going to be success and we can   actually copy this and have this one up here and  this one is going to be button dash maybe primary okay so we should be able to see reload okay this  is much more visible and much more good now if   i go ahead and click on the courses i'm able to  move on to a new component there is no component   to handle that but at least my url is changing  which is slash learn slash course that is fine if   i go up into the bundle it says slash learn slash  bundle okay that is also fine i have introduced   this functionality and my page is also not  reloading so that is fine as of now now another   thing that you'll be doing with these router is  kind of a parent nesting we have seen here that   the route is pretty simple slash learn slash  course slash learn slash bundle so this gives   me idea that whatever is happening is happening  inside this learn the philosophy behind this react   router 6 is in such scenarios or such cases where  you have the slash learn you don't need to define   the entirely of a new route you don't need to  say something like this hey slash learn and then   we are going to go ahead and say slash course you  are allowed to do so there is no problem with that   you can do it but actually what makes sense in  this case is not to do like this this is exactly   where we actually break this route into uh not  as a self-closing component so just like this   there we go now inside this one i can go ahead and  simply say hey i want to have a route again we can   have a self-closing one this time because it is  inside the learn and this alone itself gives you a   more clarity of what components are inside another  component or at least how the routing works   just by having a glance of it so this is what i  absolutely love about it now notice here one very   thing which is going to give us an error so we're  going to go ahead and say slash learn and after   that it was a slash course now then we go ahead  and simply say hey i want to load up an element   so what is the element now the first  thing is we want to load an element here   but not entirely a new element we want to load  an element right beside all of this so where   all of this i want to load something inside this  component itself kind of a parent child relation   so i'm going to go ahead and take this home  component we'll make a copy of this and let's   create two different components for courses and  bundles so this one is here so all of my courses   and bundles will be handled here so let's  go ahead and call this one as courses   and i'll like to have a copy of this one and  this one will be bundles there we go and this   one obviously is not going to say home route or  something like this this would be rather moreover   like all the bundles are listed here or something  like that so let's call this one as simply   bundle so i'm going to go ahead and say this  one is my bundle list and at the bottom of it   let's go ahead and have a simple h4 and let's  call this one as bundle card so this is how   usually happens you actually see a component and  inside the component there is a list of courses   further down the road there is a list of bundles  some something like that and this should be rather   uh courses so let me copy this first and paste  it up here because this makes sense of bundle   and i'm gonna go ahead and this one remove  this and these are courses come on courses list   and the course card courses card yeah that's fine  okay moving further down the road in this element   we haven't passed on anything yet so we obviously  want to have this one so first let's take care of   one by one things this one is going to have  a courses there we go self-closing now this   is going to give us a small error let me go ahead  and save this one no errors up here bundle is not   used we'll use that but this is a little bit of a  different scenario up here i go ahead and reload   this one now notice here it says hey absolute path  slash course is nested under the path slash learn   is not valid now what it's saying is that you have  already nested things inside slash learn so i am   pretty aware of it i know this that whatever you  are trying to have this is inside slash learn so   you don't need to again say me that slash courses  i will use my brain and i'll do it automatically   for me so all i have to do is remove this slash  here before the courses in fact you can go ahead   and remove the slashes up here as well it will  still work fine but i'm not going to recommend   that one at least at this point of time surely you  can see slash without having a slash it works fine   and it understands the hierarchy of the  architecture of the routes pretty well now   but i'm not pretty much sure until unless i  test it in the production a little bit more   so notice here now it works fine okay and let's  have another of the component let's copy this one   this will go to the route of bundles this one  should go on to the courses technically and   this one is going to go ahead and have bundles now  since we have made this one courses and bundles   we need to make sure that our link is actually  pointing to the correct direction and this one   is saying courses and this one is going to go  bundles let's test out so far of the application   we have learned quite a lot up here so there we go  now we have got everything going away looks like   did we messed up something it seems like slash  learn slash bundles and what is our url it is   course it should be courses yeah there we go  so now we have course and now we have bundles   okay this is working so far now good now what we  want to further do down the road we obviously can   mount another separate component but our job is  not yet done we can actually create something   like we have created slash learn so i can create  something like slash dashboard and lo mount those   component there but this is not what you usually  do usually like to mount component inside one   another so what i want to do is that whenever  i say courses the component courses should not   mount on some another page this is inside learn so  it should mount inside this learn component but it   is not mounting and this is where another of the  component comes into the picture which is known as   outlet so outlet actually defines precisely that  where inside component it should actually appear   whether it should appear at the very top of it  like here or it should appear at the very end   of it in my case it makes sense to appear at the  very end of it so i'm going to go ahead and say   bring the outlet here this is like a pipe you put  up water at one place and wherever you open the   outlet it just goes there so i kind of assume  it that way once i have this outlet now i have   said that in case a route is being nested here as  well whatever is being flowed should actually come   as an outlet here let's go back up here and hit  a reload now notice here after the courses this   is the outlet where the pipe is opening up so if  i go ahead and say bundles my bundles are coming   in my bundle card are coming in and the courses  my courses are coming in okay looks nice so far   okay so so far we have done a pretty good job in  understanding how the routes and everything works   on now let's go ahead and move on to a little bit  more of the complicated stuff now further down the   road inside this course is up here i want to have  another of the route what basically i want to do   is inside the courses if i go ahead and say  something like slash and i go ahead and say   angular i want to grab this value because this  is something you will be doing quite a lot also   known as params not angular but some of you might  be getting familiarity with ids like one or two or   three whatever that comes after the courses i want  to grab that value and want to display that on the   screen it will help me to understand how to grab  parameters from the url itself now let's go ahead   and work on with that so i'm going to go ahead and  say that hey obviously it is pretty obvious now   that we don't need to create another route because  it is coming up after the courses so i can go   ahead and make the structure however it is defined  and recommended to us in react router version 6.   so i'm going to go ahead and remove did  i remove something bad accidentally no   doesn't seems like so let's go ahead and  say hey i want to go ahead and say route   and i should not be saying like this yeah  there we go okay so now this is all up here   and i can go ahead and define further route inside  it there we go it can be self-closing so this time   we need to say path and i'm going to go ahead  and say hey this time the path is going to be   like this and we'll be saying colon and i'll be  saying course id you can name it whatever you   like and in this case we're going to go ahead and  define another element for this one so that it's   much more easier for us to handle the things  okay and there we go let's keep it blank for   a minute and let's go ahead and talk a little bit  more about this element who will be handling this   one here now this course id is going to be handled  by an element a standalone element which is going   to be called as simply course id the job of this  core side is going to be simple just display the   parameter whatever is coming up there let's go  ahead and make a copy of this one we can handle   it in these ones as well but i wish to create a  separate one okay let's go ahead and call this one   as simply course id is the element name up here  now in this course id element let's go ahead and   remove this one we don't need you i just want to  dump whatever the parameter is giving me so url   params is and this is where i want to display my  parameter now how am i going to do this one now   this is a little bit of the tricky one this is  where actually your hooks kicks in so we need to   bring our very first hook from notice here this  is how so much in depth previously we didn't had   these many options available from the router it  was very restricted we used just probably browser   routes routes and links and that's pretty much it  now it is so much useful the first we are going to   study about is the use params as soon as you get  this use param hook now it can automatically look   into this uh your your all the routes and here  whatever you have mentioned in this case i have   mentioned course id so it can actually give  you access of that how to access that inside   the course id just use this hook so we're going  to go ahead and say hey i would like to borrow   some stuff all the stuff that you are giving me  with the use params just like that in here i can   mention this course id if they're in the routes  if i would have said id i would be saying id here   if i've said course id there i would be saying  course id here now it's just displaying it's   a matter of just displaying a simple variable up  here so let's go ahead and call this one as course   not courses course id there we go and that's all  it takes okay now we need to just inject this uh   route not route the component up here so let's  go ahead and inject this one there we go that's   it now let's go ahead and try this out so if i  go up into the courses right now it says nothing   but if i go ahead and say angular so just take  a close look how this is happening now we have   loaded the learn that's fine we are aware of that  now we have also loaded the courses that's also   fine so where this angular component is actually  going in this is going inside the courses so we   need to check out the component where the courses  are defined so this is my courses are defined so   remember always the outlet outlet is the key  so i want the information of this course's id   inside some component i don't want to  load it up standalone but by the way   by the way in case you are worried that no i want  to i want this url parameter to be standalone then   you should not load it inside this much  of the nesting you should not do it   if you want to load it up like this that hey i am  not interested in loading it like that i want to   make it absolutely outside you can actually  declare it on this indentation level i hope   this makes it a little bit clearer so let's go  ahead and find it so inside the courses this is a   handing up ending up so inside the courses i'm  going to go ahead and say hey my pipeline outlet   comes up here let's go ahead and see that if  this time it is working so i'm going to go   ahead and refresh and there we go url parameters  params should be a little bit better there we go params url params is course id now i will  be able to change it to angular to react   and it should just display that url react and i  should be able to change it to my name also and   that will also come up okay so this is the basic  that we have done that we have got the course id   and url id and everything all up here now let's  make it a little bit more fun and interesting   so next up what i want to do here is that right  now i have to actually go up manually and click   on these links and everything i want you to  show more demos right just by clicking on   these courses and bundles so what i will do i'll  create a simple array up here so inside these   courses where i'm declaring all these ones  so i'm going to go ahead and simply say hey   let's go ahead and have a simple const course  list and inside this course list let's go ahead   and create a simple array so let's throw up  some of the course's name up here or the tech   name whatever you like to call this one so we're  going to go ahead and throw up react angular view   view and node.js i guess these are enough for  us now let's go ahead and create uh or collect   a random name out of this one so we're going  to go ahead and simply call this one as simply   random course name and how we're  going to grab the random name   we're going to go ahead and say course list if  i go ahead and say 0 it will give me first value   but i want a random number in this place so  i'm going to go ahead and use math.floor floor   and there we go and further down the road i can  use a math dot simple random up here there we go   this needs to be multiplied so we're going to go  ahead and multiply it by course list dot length   so hopefully this will give me a course name  randomly every single time and now let's go ahead   and craft a couple of links up here as well now  i definitely don't want these links to be below   the outlet so i'm going to go ahead and click  up here so just where i'm saying that hey this   is my course card and this is my bundles i'll not  touch the bundles that much i'll just work up here   okay now this time uh previously we have  used uh these links here where are our links   there we go so these are our links  so so far in the entire of the   these routings and browser routing we have used  is the link but this time we have got something   of a new one and this time i really want to talk  on that one so we'll bring another of the guy and   this is nav link what's special about the nav  link how is it different from the link itself   uh to be honest not precisely too much on just  couple of instances it actually is different   it is still can be used to navigate people here  and there but there are two more properties that   it actually gives you in addition to the basic  links so let's go ahead and work on with that   so let's go up here instead of the link  we are going to go ahead and say hey   i would like to add a paragraph here we're going  to say more test up here so that we know things   are loading up properly more test you don't need  to do this now let's go ahead and simply say   nav link and just like that this is my nav link  now what do you want to have in this nav link   first let's have a course name so i'm going  to go ahead and throw up simply random course   name up here now just like we have the link  in the nav link also we have this two here   now in this tool we're going to go ahead  and add a simple link up here there we go   so where this link is going to go let's use the  backticks and i'm going to go ahead and say slash   learn remember in the links and the nav links you  have to write the proper path and the entirety of   the path so slash learn slash courses and then  we're going to go ahead and add a variable so   just like that not four dollar and we're going to  go ahead and random course name okay so this is   looking absolutely good as of now let's go ahead  and save this one now i am deliberately not giving   it any class name or anything like that there's a  reason behind that as well let's go ahead and hit   the reload and notice here we have this really  tiny angular coming in so that is also nice let   me go ahead and change at least its text i won't  be even changing the text i'll show you why so   notice here it says angular up here okay that is  fine and if i go ahead and click on like courses   it goes me to courses let me go ahead and hit  refresh this time it gives me view so every   single time a new course is coming in now what i  want to do is further i want to display some data   based on what is being clicked up here so  notice here this is taking me to node.js   so we are getting the url parameter as node.js  if i again go back on to bundle and then courses   it again gives me different ones so i'm able  to get data up here so that is also nice now   what's interesting is if we get two of the  nav links let me go ahead and make a copy   now there are two links this time this time  this is not going to go into variable this would   rather say test because we offer tests as well and  instead of the variable this one is going to say   tests okay so what i'm trying to do up here you'll  get that you'll understand that in a minute let me   go ahead and refresh up here now we have a nice  link so let me go ahead and add a class to this   one so we're going to go ahead and simply add a  class name so that we can see what's happening   btn and we're going to say btn-lite save that and  hit a reload and there we go okay so now in front   of us there is a situation i go to the bundle i  go to the courses now i click on the test it says   test if i go on to the view i get a view but there  is no way to find out that which one is active   obviously right now there is a button but  still you are not able to find out that   which of the tab is active i want to highlight  it maybe add properties to it maybe add class   names or something like that so how we can work on  with that so let's go ahead and add this one and   that is exactly why this nav link is used links  doesn't gives you that but nav links actually   give you some of the properties that you can use  right inside the style so style works like this   in this you can actually fire up a method just  like this now inside this method you can actually   extract a thing which is known as is active now  you don't have to declare it in the previous days   we have to use the manual methods to active the  links and all that now you don't need to do any   of that now what i can do is here i can go ahead  and simply return what do you want to do when this   is active now this when this is active i want to  have a simple background color so i'm going to say   back background color so let's use something  which is we want to use selectively so we're   going to say when this is active then  do something otherwise do something   so we're going to say that when this is active  use pink as a color otherwise in the background   otherwise this is going to be simply yellow okay  so let's see now if we are able to actually see   that or not in action i'll hit reload just for the  sake of it and notice now the angular turns into   a yellow although we don't have  this one so let's click on this one   and now it is angular if i go up into the test  it again goes to yellow because it's not active   if i click on up here it turns into pink i know  this is a little bit difficult to see right now   but i hope you are at least able to see something  that how we can actually make these things   and this is the one property that comes as a bonus  in this one so i hope having you you're having   a fun with this one okay so i can come back to  bundle load another one this time view that's nice   bundle this time it's react so that is all fine  and nice okay now let's take it to one more step   further now the next goal in front of me is really  simple i have this url params is course id so just   try to assume that you are clicking on the courses  all courses are loading up this is a react course   this is a test course whatever it is and when you  click on that particular course now you are taken   up onto the detail page of the course where you  are seeing all the information this right now is   just url says params but based on the react  parameter that you receive on the url maybe   you have made a database call received all the  information and have displayed based on the route   but further down the road i want you to say that  what if i want to further carry some information   maybe on this page itself there is a button first  let me give you that button so that you can have   a more idea and visualization of how things are  happening so inside this div let's go ahead and   grab a simple button we're going to go ahead and  simply have a button and this button is going to   take you somewhere okay let's go ahead and say  price yeah that is fine let's go ahead and give   some classes of the bootstrap since we already got  the bootstrap up here so we're going to say btn   and btn-warning there we go okay so these are all  good now it will help us to visualize it further   down the road let's click on bundle courses and  we have on to the node.js course itself now why   is it not loading up let me go ahead and quickly  check that okay just was a matter of refresh i   didn't refresh the page at all so okay so now we  have refreshed this and let's flow the understand   the flow so here all of my bundles are being  shown up here all of my courses are showed up and   inside this course card i'm interested in having  a view course or the tests as well view test maybe   i'm interested in knowing about the view course it  is showing me all the details of the view but it's   not showing me the price now i want to click on  the price and i want to move on to some another   page and see the price so i want to carry some  information with me now you might be asking that   hey are we going to carry further down the road  like slash view slash price yes we can but i want   to give you another perspective of the scenario  maybe you are on to all together some different   route maybe different component different page so  how you can travel this information now we usually   don't worry about that much because we use redux  or some state management to grab the information   but you can actually carry some information  from here as well now let's go ahead and work   on with that so here inside the button itself i'm  going to go ahead and work on with that i'll come   back on to this one here first let's bring up the  route that where we want to carry this information   and for this one i have to create a dashboard so  let's go ahead and create a dashboard too much   i'll copy this one up here and let's create  here so this is where this is the new component   where i want to carry all the information maybe  this is a dashboard now inside this dashboard   i'll just remove this one here and i'll see what  information i am carrying so it says info that i brought in the info that i got here is and then we  want to just display this information right now we   don't have anything so we're going to just keep  it like that okay so where do you want to load   this particular thing now it's totally up to you  i'll just use this route after here so probably   we can actually minimize this one there we go so  after these all learned whatever we have to do now   i'm creating this route up here so i'm going to  go ahead and say route just like that it can be   self-closing here what is the path that you want  to have this one i want to have it on the root so   i can either write it directly dashboard still  old habit so i'm going to go ahead and write slash   dashboard you don't need to write slash anymore  it just works out of the box and the element that   you want to serve there we go the element that i  want to serve is dashboard there we go okay so in   theory now at least if i go up here on to slash  learn not learn even i guess we can directly move   on to the dashboard and it says info that i got  here okay that is nice but i want to come here   by clicking on the price itself now obviously by  clicking on the price i can come here and i can   use my link i can use my nav link but the question  is which one is the best in this place that you   want to use now you don't want to use any of that  i'll show you that that how you can actually work   with that you want to use something new and by the  way you can use link to spoiler alert but i want   you to use new thing up here i want you to bring  up a navigate feature here so we'll bring up two   new hooks this time so first one is use navigate  and within a minute i'll be using this one as   well which is a use location so first let's talk  about this use navigate and how you can use that   now these two things use navigate and use  locations they are pretty simple to use   so let's move back at the at the  bottom where do we want to use it   i want to use them and this is the pricing this is  where i want to use it so first and foremost i'm   going to go ahead up here and i will say that hey  i want to use navigate and navigate actually comes   from this hook use navigate and that's it that  is all it takes as a prerequisite now you can go   into any button or wherever you want to actually  uh take this information i want this one not to   be link or now link so i'll be directly saying  i want to hit on the event which is on click   so you go up like this there we go now inside this  i want to fire up a method there we go and further   i want to use the navigate there we go that's how  you use the navigate now in case you want to use   or you have used something which we have talked  just about that i want to move people somewhere   around and you might be remembering the history  so i can use history.push history.replace to move   anybody anywhere now you don't need history you  can actually directly use navigate in place of   history so i'll just say navigate and i can by  the way say just minus one to navigate one page   back one page you'll see a lot of people use that  i don't use it that much in my code i find this   little bit confusing i think that navigate should  have directly the proper path and route where it   should go in this case i wanted to go to dashboard  and i will copy it because i might make a mistake   so i'll bring it from the route itself so this  is dashboard so copy that come back up here   and this is where i want to bring the dashboard  okay so now in theory at least the progress that   we have made anybody clicks on the button he will  be able to move on that i'm not using link i'm not   using nav link but rather navigate which is a  hook itself let's go back up on to the browser   and see how much progress we have made refresh i  will not forget this time so bundles courses i go   into react page and i want to find the pricing of  the react i go up here and there we go i'm able to   move on to the dashboard but i'm not bringing any  info with me now when you use the navigate itself   this navigate has a second parameter as well and  you can pass on an object like this and in this   you can pass on this state and in this state you  can pass on or take whatever you want to take with   yourself uh maybe you want to take a pricing  like 299 so it's expensive these days so 3.99   okay so this is what we got and there we go now  if i go back again you cannot just hit refresh   because you are not carrying some information on  the very first place i'll go to the bundles again   courses and this time node.js and i'm saying i'm  going to say price and there we go i see nothing   now you might be wondering why this is nothing yes  you are carrying the information there is no wrong   in that but you haven't actually instructed this  dashboard that hey this is how you have to extract   the information so this time let's go ahead and  use the another hook that i placed at the very top   so we're going to go ahead and say const location  and this time this is going to say use location   there we go and this location can actually use  this one so instead of these dashes i'm going to   go ahead and move on and we'll say hey location  dot state so whatever you're passing from there   it comes up now here's a very very big note to  yourself now whenever you use navigate or anything   which is taking advantage of this navigate hook  or use location anything everything is actually   serialized so no matter what information you're  going to be passing up it is going to convert it   as a string so just be cautious about that it  has mentioned in the documentation by the way   okay let's go ahead and see if we have made any  progress or not so i'll go back i'll refresh   up here as well let's go to bundle courses  how why we are getting node.js all the time   yeah this time view so view and  we are gonna get the pricing   and this time i'm carrying 3.99 now it's  not about just 3.99 you can carry more   information maybe you are not interested in  carrying the 399 maybe you are interested in   carrying the course id itself you can actually  go ahead and do that let me go ahead go back   and bundle courses react is good and we are  going to take the price and we are taking   uh 3.99 why we are taking 399 again i shouldn't  be taking 3.99 i'm taking course id this time   did i saved it properly it should go course  id let's go ahead and try it one more time   let's go back refresh couple of times node.js  and the price there we go this time we are   taking node.js probably i didn't saved let's try  it one more time maybe i made a mistake refresh   bundle courses react price i'm taking react with  me okay so this is the basic this is the one way i   told you carrying the information can be done with  another method also so we need to learn that also   so in case you don't want to use navigate but  navigate is actually looking much more promising   i need to dig up a little bit more to find out  which one is the best but you can also take some   information with the link itself hey you could  have told us earlier that we can just use the   link yes but otherwise you wouldn't be that much  focused on the navigate link so let's go ahead and   just below this button i'm going to go ahead and  add a simple link just like that and this is going   to go ahead and say test link and inside this just  like we use the two there we go we are going to   again move to the same route which is going to be  dashboard so copy that and dashboard now in here   also you can actually go ahead and pass on the  state but how you pass on the state is actually   different this time it is a prop in here and this  prop needs to take all the information inside   uh just like this you can pass on like course id  and all the values or something like this but this   needs to be inside the string so i need to dig  up a little bit more that how the flow actually   is working i'm i was reading the darks much more  but just to show you that if you want to carry   something like node.js or maybe a variable you  can actually go ahead and carry that so let's go   ahead and not node.js let's carry django so that  would be unique now if i click on the link i'm   carrying django if i'm clicking on the button  i'm carrying this course id let's go ahead and   see and verify that go back hit refresh couple of  times i go into the test link if i go up test link   i'm carrying the django with me if i go back i  click on the price i'm carrying the react with me   so there we go so told you this is the two way i  personally found that using this hook and navigate   is much more friendlier for my my taste  but again if you don't want to bring it up   link is also going to work fine for you okay so  let me quickly summarize what we have learned so   far is this all about the browser router or the  entire react router version six no there are so   many amazing hooks that probably if you'll request  enough in the comment section i would definitely   create another video discussing more in depth  but let me quickly summarize so we have seen   that that a lot of things are changed up here  and there is no switch or anything like that   there is a router which is a browser router  everything needs to be wrapped up inside that   and this is something you need to do in the home  page in case you are using some child route in   another component still there everything needs to  be wrapped up inside this routes there is an s at   the end and inside the routes you can go ahead  and declare all these routes as much as you want   now in this version of the react router this  time we are more focusing on the hierarchy   itself so everything you declare on the same level  of kind of indentation or hierarchy on the branch   then you can actually go ahead and avoid these  slashes so instead of my apps you can go ahead   and use just the apps i still use slashes and  in case you want any route further inside that   it is logical now that you go ahead and indent  them inside them you can expand this route into   opening and closing component itself and then  you can say slash learn courses slash course id   it helps us to understand the routes just from the  one page up here so i love this one also we have   seen that the exact keyword is also gone gone up  here we have also seen that now we instead of the   component we have got elements an element directly  takes the gsx or the jsx component declaration   further i can use the replace i have seen that  how we can use the navigate itself to redirect   anywhere anywhere we want and further we have  seen how we can access the course id or any of the   dynamic values that we have here so this is  also nice further we have seen going up here   that how we can use these outlet methods so  wherever you want the children's to display   you just have to open the pipe there that is the  outlet further down the road we have seen that   how we can actually use this active property right  directly right out of the box we don't have to use   use history and all those magic that he used to  do now this is not required we can just directly   go ahead and work on with the nav link itself and  nav link give us this as active and based on that   you can apply any property or anything whatever  you like and further we have seen that how we   can actually use these nav links with the buttons  and basic stuff further this is the interesting   part this is we saw that how we can actually  access the url parameters by this navigate and   all these stuffs the course id use params not  navigate user use params this is how we access   the parameters in the url itself further down the  road we saw that how we can carry some information   so we saw that there are two methods the navigate  and the link itself to carry some information my   favorite one is navigate itself so this is the  basic overview and enough to actually go ahead   and get you up and running with the react router  version six is it all no let me show you there is   so much more going on up here and this is all that  they got up here now this is the tutorial this is   the main concept this is where you're going to  see a lot of the meaty information that comes in   so remember i told you there are two ways of  carrying the information yes this is exactly   coming up from the documentation so notice here  you set location state in two ways by using the   link and by using the navigate so these two  examples are there they are a little bit uh   not so like beginner 101 friendly still friendly  very friendly uh but this is all what i've showed   you but again everything is obviously coming up  from the documentation itself just the easier way   if you have enjoyed this don't forget to hit that  like and subscribe button and in case you want   much more in depth further down the road  let me know in the comment section i would   love to work on another one of that let's  go ahead and catch up in another such video   whoo that was a lot and a pretty big video  and there is still a lot to talk about the   react router version 6. in case you want me to  follow up this video go ahead and let me know   in the comment section there is still more  little bit more to talk about the version 6.   so let's go ahead and catch up in another  such video assuming that you've already   hit that subscribe button and i'm gonna  surely catch you up in the next video no matter how hard they try

Channel: Hitesh Choudhary

Views: 21,947

Rating: 4.9373369 out of 5

Keywords: Programming, LearnCodeOnline, javascript, react, react router, react router v6, learn routing in react

Id: 0cSVuySEB0A

Length: 57min 57sec (3477 seconds)

Published: Tue Nov 09 2021