React Router DOM

with the intention of making my code available to you I decided to work in the cloud I will be working in code sandbox you can find a link to the code in the description below if you do like this idea click the like button and share your thoughts with me in the comments below I am now in code sandbox as mentioned and I have opened a fresh react template if you look at the dependencies pane we can see that we have three required dependencies for this project to work with the reactor our Dom hooks we need to add that new dependency I will click the add dependency button and search for react router done and the first result is the one that we want I clicked that dependency and now it appears in the dependencies pane let's start by opening the index.js file and importing the browser router component [Music] from react router down then I will wrap the app component with browser router and that will give all of the underlying components access to the browser's history I will be showing the use of the four hooks that react router Dom has available to us use history use location use parents and use router match I'll go in order and start with use history I will open the app DJ's file and use the editors intelligence to out import use history and then I'll run use history in line six and I'll save the return value in a constant called history and I'll start by logging the history object so that we can see it awesome react rudder Dom makes it that simple to have access to hit the history object in our components we just wrapped the app component with browser router and then we lock the history object using use history so what can we do with the history object with it we can navigate to different pages by adding links we can know where we are in relation to the URL like say we are in the about page we can go back to where we were before with for example a back button and many more let me know in the comments below if you have some interesting news cases let's use the history object to navigate to a new page I will add a button after the h2 tag with the text to about and add a click handler called handle click then when the user clicks the button we will do history dot push slash about and I forgot to declare this as a constant now that button changes the URL to have the slash about route to complete that work let's add that route I'll open the index Dodgers file and bring the route and switch components from react route Erdem I will remove the app component for a moment I will add the switch component and inside of it I'll add the base route as a self closing tag it will point to the base URL by adding the path property and will render the component app we have our landing page back I'll add a second route that goes to the about page and presents an inline component that renders h1 tag with the text about page you can see that if I click the to about button even though it changes the route it doesn't take us to the about page I explain that behavior in another video that you can watch by clicking in the suggested video above for this video let's just say that we need to specify in our base route that the match for it needs to be exact now we navigate to the about page navigation is our use case for that first hook use history now let's talk about use location the use case that we will look at for use location is we want to have a button that will take us back to the landing page but it should only appear if we are in the about page let's start any component that is outside of the switch component will appear in the application always a good example of something like that is a header component I'll start by creating a header component in line 9 that will render a dip with the text I am header now I'll add that header component before the switch and there we have it if I am in the landing page it will be there and if I navigate to the about page it will be there as well now we'll bring the use location hook by typing use location and using the auto import feature I will run it and store the value in a location constant let's quickly log what we have in the location object we have four properties and the one that we will use is the pet name which lets us know where we are so our logic is if we are in the slash about page show a button otherwise we won't and since we are good developers and we like best practices I'll add a constant called add about page and what does it mean to be at the about page it means that the location the pet name equals slash about now I'll say that if we are at about page will return a button that says back now we see that back button of course it does nothing we will use the u s-- history hook again to go back I will pull use history with the auto import like before run it and catch it in a constant called history if you saw the page jump right there because I'm using the predefined feature that the IDE has by clicking shift alt F that cleans the code for us I'll add a click handler to the button and this time I will call it handle back click I'll declare that in line 19 and we will use the history object like before but this time we'll use the go back function which will just go back one entry in the browser's history so when the user clicks the back button will say history that go back and that's it if we go to the about page and then click the back button it takes us back that was use location next is use parents parameters are used for things that are dynamic like IDs for instance if we had a list of books and we clicked one that could take us to the about page for that specific book to add parameters to a route we just need to add a column and then the name we want to give to our parameter I'll call it name but I don't want the parameter to be appended to about so I'll add a slash between them let's update in the button in the app component to have parameters instead of just pushing to about I'll change the string to be a templating string and it will push to about slash and I'll add a variable name that the handle click function will accept I have to change the on click handler a little to be an arrow function that runs our handler passing a name and the name will be Rich Dad Poor Dad we can see right away that that affected our button to go back because now the route is not just slash about we can fix that by going back to the header in changing the at about page definition to be location pad name that includes about and we have our button back so now what we click the about page and we see that the URL includes the Rich Dad Poor Dad name let's clean a little by creating a new file called about dart Jas we will import react from react and declare our about function here we will return the same as before and finally we have to import about from about then let's pass that component to our route and perfect everything seems to be running fine I'll go to the about file and bring in the use patterns hook let's lock the parents and we see our Rich Dad Poor Dad name so now we can simply do something like parens dot name another option would be to just grab the name by destructuring and now we present our component depending on the parents to prove the concept a bit further I'll change the text of the button to include that name I'll declare rich that title constant with that name and I will pass it to the handle click function as well as to the button text then I'll add a second button but I'll declare a new title I will call it the richest and it will be for the richest man in Babylon I'll change that in the second button and now let's try it I'll go to the base route and now we have our two buttons if you are liking the video so far click the like button and consider subscribing to the channel if I click the Rich Dad Poor Dad it takes me to the about Rich Dad page and if I click the richest man then it takes me to the richest man in Babylon that was used parents and we have just one hook left use router match use router match might be less common but it can be extremely useful let's bring it in in the about component and log it we can see that it gives us access to some properties that we have already seen before like the parents but let's think about a use case for this one we are in the about page and it shows a title that is dynamic but if we want it to render a Buy Now button only if we are looking at the richest man in Babylon how would we know if we are there there are many ways to go about doing so however let's try using news route match I'll pass a string to the user out hook with the exact path that I'm interested in and then I can say show by button if we have a match and the match is exact let's add that button to the UI I'll add a react fragment since we are going to have two tags without a parent and below the h1 tag I'll add that Buy Now button I'll include the show Buy button logic if show Buy button then Return button let's go to the base URL I'll click rich that poor dad and we don't have a Buy button I go to the richest man in Babylon and we have a Buy button if you like that use case don't forget to click the like button I'll leave a link to the code in the description below and if you found this video useful consider subscribing to the channel thank you for watching and see you next time

Channel: We Engineer

Views: 15,650

Rating: 4.9430604 out of 5

Keywords: react router, react router dom, react router tutorial, react router switch, react js router, react tutorial, react for beginners, react tutorial for beginners, react js, dynamic routes, fetch apis, react fetch api, dev ed, React router history

Id: aHv_3g2Fw8A

Length: 17min 58sec (1078 seconds)

Published: Sun May 10 2020