React Router Tutorial | React For Beginners

hey Google what's the reactor outer here's a summary from freako camp medium reactor Rooter is the standard routing library for react react Rooter keeps your UI in sync with the URL it has a simple API with powerful features like lazy code loading dynamic route matching and location transition has incorrectly yo in this episode we are gonna cover react router so normally on websites when you go to a bout page or something like that you would have to fetch that about page from the server however would react and react router what you can do is when you go to about page you will just load up that specific components you don't have to go out and fetch for a HTML page or something so everything is very fast and dynamic the page doesn't refresh and it just gives that app feeling to it so prepare yourself open up vs code stretch your back stretch your face let's get going and about it alrighty everybody so the first step that we have to do is just open up vs code as usually and then what we actually want to do is install another plugin so I just have a create react app project here opened up empty nothing interesting I didn't do anything to it so to do that MPX create react app and then you give it a name I gave this one routing and then you just let this install and after you do that we would have to install the library to handle the routing and that is called all you have to do the NPM install react router down like so hit enter and then we wait good so now that we have everything installed we can hit M p.m. start NPM start that's gonna open up the development server for us I'm gonna close up this terminal because I trust that it's gonna open hopefully and what I'm actually going to do before we go too deep into this I'll just drag this one here by the way so we can see what's going on and this is just gonna be again a simple react boilerplate project for us and what I'm actually gonna do is I'm gonna copy everything from the AB de s and I'm gonna make a few pages here so this is kind of like you would have a few come opponents with different pages so maybe I'm gonna have an about page so I'm gonna say about Dolce s I'm gonna paste everything in here and I'm just gonna change a few things so it's not gonna be a penny more it's gonna be about we're gonna export the about and I'm gonna delete everything in the header and I'll just say h1 about page B it is a valid page there we go and we can get rid of this class name as well and that's pretty much all we meet I'm gonna get rid of this logo actually you know what let's go back here and in the app KS and I'm gonna remove the logo from here as well and everything from here and I'm just gonna say h1 app all right it's safe let's do this again so we have to to work with I'm gonna create another one and let's say we have like a shop or something shop Jas perfect import everything again from the about I'm gonna rename this to shop and we're gonna export shop and rename this from about page to shop page and quickly I'm gonna also create a navigation so let's create a new file navigate s if this componentry is getting too crazy you can just create a folder named components and stick everything in there so but in this case we're fine now let's let's rename this to nav nav and this is gonna return us a navigation so a nav here and why are you not also completing there we go thank you very much and here let's just say I have a h3 maybe I have a logo or something and then here you would have a UL with a list of all the navigation tabs so about and we have shopped in this case shop hit save all right we're exporting let's make sure we export nav here with large n hit save and let's just import everything in here import we're gonna import the the nav that's coming from dot slash the nav perfect import let's get the about from about this is so fun to do import where does it stop no shop from shop this is the best part of development this is what makes me alive okay so imported everything now if we add everything down here let's do well we would have I'm gonna remove this h1 app it doesn't make any sense we would have the nav on top right obviously and then we would have about here and then we would have shop the problem is if we add it like so it's gonna render out all the components so if we take a look back here in chrome as you can see everything is rendered but that's not what we want we want specific parts of our application to be rendered when you route changes so maybe I want to have the nav here always but when I go to slash slash about like so that's when I want to render the about page and when I go to shop that's when I want to render the shop page so how does react rather help us with that well let's take a look and before we do that let me just kind of remove everything from the add the CSS because I kind of want to add some styling to our nav in a bit actually and so let's do it now because I'm gonna forget in the future so now let's just add a class to this I'm gonna add a class name actually since we have only one nav we can just do nav nav I'm just gonna add the display flex to this hey justify content space around and then the line item center and let's add a min height of like 10 VH to this any a beautiful beautiful bluish background color light blue that's ugly let's change it and when this nice dark bluish color and let's also change the color to white because this is a very dark color okay let's take a look and yeah that's good alright and let's also maybe do this one as well for that actually I'm gonna addy Navin Stu this a class name so it's equal to you this is gonna be nav links okay good let's go here get the nav links and I'm just gonna add a width of like 50% and a display flex to this as well just to find content space around a line items Center and what am I missing the stupid the dots those stupid dots how do you remove the dots I'm not sure let me think you do list-style:none that should work let's take a look there we go all right so we have the logo and the shop but now we are actually kind of out putting everything so let's go into incorporating react router in this down here we're gonna import a few things from react router Dom thank you truck for coming by very much all right close this up make sure to do these semi-colons after and not be stupid like me perfect and here we're gonna add some curly braces because because we want to import specific things from react router down and the first thing we want is something called browser router and this is a long name so you're gonna see this a lot of people do is they're gonna say as router and what this as basically means is that you can rename browse a router to something that you want here so I just rename this to this okay that's all of this I'm gonna add the comma another thing I want is something called switch and the last thing is something called route okay make sure if you add from here to let let it know and how we incorporate this let me can go through all of these to add the ability to handle routing and react that's why you need this browser router in this case we named it router and the way you use it is you just wrap all your components that you want that routing functionality to be to be available in its a router actually I'm gonna do like this router ok whoa so basically everything that's in between this router is going to have the ability to use routing okay perfect but nothing's gonna happen yet as you can see if we pay hood nothing happens we're gonna use something called route and what this does it renders out a component based on the URL so do I want the nav now I kind of want that have the Navagraha pages but I do want the about to show up only when I go to about so I will create a route like so and rather than rendering out this about page like so I'm gonna delete it okay and then what you would do is you would give it a path so path and you would set it equal to something all right and here you can define the path it should render out so this I want to go to slash about and now when we go to slash about it's going to render out the about component however we do need to specify which component because right now it doesn't know so very simple all you have to do is add another prop here component like so and you can set this equal to we're gonna add curly braces and all you have to do is say about easy peasy lemon squeeze on oh all right delete the shop and pretty much we're gonna do the same thing we're gonna add a path set it equal to slash shop I believe yeah there we go and we can render out the component shop like so perfect hit save and let's take a look on what we got as you can see it's not displayed anymore delete this and look at that we have nothing here however if we go to slash shop look at that we have shop if we go to slash about we are gonna render out the about now let me just create another quickly another component down here just to illustrate something a problem that you might run into so rather than making a new file I'm just gonna create one here I'm gonna say Const own set equal it's just another component here I'm just gonna return a div that's gonna say homepage ok let's say we have a home page it's safe and right here I want to render out another route that is gonna take me to the path of just slash slash basically means when you visit the website it's the home page right it doesn't have anything after this URL is just the name of the website so slash and then we render out the component home okay simple make sense well let's take a look at what's happening here if we go to home well we have the home page however if we go to slash shop well we have home page and job why is that happening so the reason why this is happening is basically it just checks with without being super specific and exact so goes through all of these routes here and it checks hey does it have a slash so it goes here checks if it has a slash boom that's all it cares about it has a slash render out the component perfect here it has slash about so obviously it's gonna render out slash about and here it's not gonna render it out anymore because it has slash shop however here we don't have anything specific after so it's gonna render out the component but we don't want this to happen how can we how can we fix this issue well this is where the switch comes in and the switch basically all it does is it kind of stops the whole process of going through all of these routes as soon as it goes to one and it matches the URL it's gonna stop and it's gonna only render out that component so the way we can use that switch is I'm just gonna rent a gonna sandwich it just like we did this router component across all of our routes and now as soon as it detects the shop and the about or shop whichever I want to go to let's say I want to go to about and hit save and look what's happening now as soon as it reaches the slash it stops it doesn't render out the about anymore because this is the first match again it just gonna starts it starts looking from here on out words and since this is only a slash it's gonna render it out and it's not going to render out anything else so how can we fix this well one way we could is to move this about up here and this is this is not nice but look at that now about render so as soon as it reaches the about it renders and it doesn't render out these components anymore and actually the way we can make this the easiest is rather than just kind of handling these component these routes and putting it up on each other and down on each other until everything works as we can specify that the slash should be exact so only if you go to slash this component should render out anything that comes after is not gonna work anymore so we can do exact here and now basically only when it's like so or like so this home component is gonna render out as soon as we go to about only the about it's gonna render out and we go to shop only the shop is gonna render out all you have to remember is that when you add a simple slash like this and you want to go to the home page well that's not very concrete and react router is gonna render it out anyway so you would have to specify that hey only if it's slash we should render out component and the switch component all it does again is as soon as it finds that route with the specific path that's the only component it's gonna render out and everything else doesn't matter alright now since we added this let's see if we can navigate to them in here because I'm I don't like doing this and nobody nobody really does that in real life so let's go back to nav and the way we can do that is rather than adding an anchor tag that we would normally do we would import something from react route or dumb so let's import something from react router down and here I can add curly braces and what I can import is something called link link like that and we can wrap around our allies and this link so let's add a link here perfect I'm gonna wrap it around the list and we can kind of do it the same way to the other one that's one I'm just gonna copy paste this and just add shop because I find it faster it's safe and this only takes one prop and the prop that it takes is something called - and you I mean you can guess what this is gonna do if I add slash about it's gonna take me to slash about if I add to here that equals to slash op well yep let's take a look and the links we cannot see them right now because you're kind of blue so let's fix that simple way we can do that is just a daikon style here and just create an object that's gonna have a color of white perfect and let's do nav style here and now I can just add a style here that's equal to you nav style and I'm gonna copy and paste this down here as well so on my link hit save let's take a look and there we go we have about n shop when we click look at that it's dynamically changing and this one doesn't work link to shop because I added it to the Li so let me just copy and paste it up here it's safe about and shop here we go how beautiful is that and since we didn't add the nav component to the route this is always gonna stay up here and it's not gonna re render so that's very very nice perfect now let's see how we can create dynamic routes because that's one of the most fun and cool things we can do with this router so let's go to the shop and maybe I want to render out a few items here and a simple thing I found as a foreign for tonight API okay and what they have here is basically you can run these fetch fetch calls here and one I found that very simple is upcoming items and if we click run here it's just gonna throw me a list of upcoming items in their shop so let's just I'm gonna copy this in a bit let's go to shop here and kind of make this work so when we go to the shop I want a state and here so I'm gonna say you state and use effect again the state kind of holds the information that we're getting from the API and the use effect basically runs that fetch call when our component mounts so let's create a fetch call here I'm gonna say call and we're gonna say fetch items and this is gonna be equal to a function and I'm gonna add a Seng here because this is coming from a database and I'm gonna say Const data it's gonna be equal to a weight and I'm gonna fetch this link here so let's copy this sucker get paste it in here and then let's just console.log out the data and see what we get perfect and up here to run this I'm gonna use the use effect function here and if I add this empty parentheses parentheses curly brackets here that means that this is only gonna run when the component mounts so we can just do fetch items in here perfect hit save and let's take a look what we get go back here when we are on shop page and as you can see when I'm on the about page nothing should happen but when we go to the shop look at that we get a response and here I think we need to actually convert this into JSON JSON hello JSON let's go to JSON Const let's say this is the actual item set I'm getting back here and I'm gonna await data dot JSON and down here rather than console logging the data we're gonna cancel out the items hit save let's take a look and there we go we get 10 rows of different items look at that gorgeous perfect let's render out something in here I want to render out the name let's let's only do that so how do we do that well we have an object here and it has an array of objects who Inception and the way we can do that is we can extract this information and then we can add it to our state so I'm just gonna extract this items that's all I want so let's create a state to put those items in so how do we do that we say cost and we say items and set items and that's gonna be equal to use state and here I'll just drop in well what is this gonna be it's gonna be an empty array so I'm gonna add an array here okay simple okay and here rather than console wagging well actually I'm gonna keep that but what we can do is we can set items okay from here items and we can just set the items to the items that I'm getting back here the one that we named the data the power there we go perfect add this to my state and now we should have this dot slash so this is basically how I have in my thing okay a list of these items and here if I open this up we can get the name so there we go we have to name and there perfect so here I can kind of render out let's do items that are map and here we get back the individual item that's gonna return the h1 with item dot name so let's take a look if that works item dot name pray for the gods hit save ooh errors no items down map is not a function and I think the reason why that happens is because this is what we're adding to our state so we're adding this object okay but I want to add this items and since I named this items we're gonna have to access items again because if I want to access the rows I would do items dot rows here but this is named items so we have to do items not items again and I'm gonna add items that the items and the set items so now it should work hit save let's take a look and look at that we're getting back a list of all the different items from that API perfect we're getting this warning because we didn't add a key we can add this item ID if we want to we want sure let's add it we can add a key here and it's gonna say item dot item ID hit save let's see that gets rid of our error and there we go it does now how can we create a link let's say I want to have this list of items and but when I click on one I wanted to take me to that specific page and there I can maybe display more information about this item images tags description and things like that so let's see how we can create that dynamic crowd well the first thing I want to do is I want to import the link from react router so I'm gonna say import link from react router Dom perfect got the link we got the power how do we use this power well we're gonna wrap all the links around this item dot name let's go here I'm gonna link this around it like so I'm gonna copy this paste it in here alright perfect and to where do I want this to take me to well I want me to take me to shop so I'm gonna add shop slash and here I can add a dynamic piece of data so the way we can do that I'm actually gonna convert this to two backticks rather than then the other one rather than the simple quotes and we can do slash shop again slash and I can interpolate some JavaScript here by adding a dolla where's my dollar dollar sign there we go and here I can just pass that item that item ID perfect hit save and let's take a look and as you can see when I hover over it down here down there you're gonna see that we get that preview of where it's going and as you can see a look at that when we click on one of these it's gonna route me there however we don't have a route set up to go to this so how can we do that so it takes us to a different page or component when we click on this now this works here and the URL but nothing else so the way we can do that if we don't know a specific data that we're gonna get is we can do this we can go to route we can create another route and we can take take it to the path shop slash let's do slash shop slash shop slash and here I can add a double dot it's not a double that it's a colon is it the colon colon yeah and I can add a parameter here like IV or something you can add anything you want but I'm gonna leave it at I B so when this hits when you go to shop the : Ivy now so that what that means this shop slash anything else in here it's gonna render out the component I want here so let's create a component for this and I'm gonna say maybe this is gonna be an item detail Jas okay this is the the page is gonna take me when I want additional detail so I'm just gonna copy everything from here actually because from the shop because I want to use a lot of things from here and I'm gonna keep this items I'm going to rename this to item and set item okay I'm not sure if this is gonna be an object though because what we're gonna do is I'm gonna eventually fetch another piece of data from an API with that specific ID but let's not do that right now let's just delete everything in here and I'm gonna get rid of this fetch item so I'm gonna make everything singular and here again I'm gonna just delete everything in here and let's just render this out let's say item okay so I'm not doing anything in this component so far I just have a function item I'm gonna rename this export item okay I just have an empty use effect here that doesn't really do anything doesn't fetch anything and an empty you state I just want to render out this okay but I kind of set this up to what we're gonna do in a bit so I'm gonna bring this back here into the app that is import item detail from thought slash item detail so we get that sucker and what we can do now here is just render out component equal to item detail perfect so now look at this fetch items is not defined okay well why is that line six and item detail line six where is fetch items okay so we didn't let's just get rid of everything in here you know what why am i making my life hard perfect now let's take a look when I hit shop well it's gonna take me to the shop route but when I click on this or add anything here let's do bla bla bla hit enter it should take me to that item page it doesn't if hopefully you remember why is because as soon as our route matches shop it's gonna stop right there it doesn't care what comes after so if we go back to our app yes we need to specify that this needs to be exact okay when we go to shop this needs to be exactly if there's something additional to it well then it should go down here so if we don't have this exact it's gonna stop right here as soon as it matches this slash shop okay it's just gonna render our shop it doesn't care about this route anymore so make sure to specify exact there and now if we take a look oh look at that let's go back we have shout a shop and as soon as we click on one it's gonna take us to the item super cool however how can we get additional information about this specific item so that's kind of what we want to do here so everything works so far as you can see every route that we generate is new so it's totally new perfect and let's see how we can do that so the cool thing is about this API is that we can get a specific item if we take a look here and all it does is we need this link again so we're gonna fetch this data and we can just pass this ID in that we're getting so let me copy this from here and paste it in my item detail so item detail here again I set up this use effect so we can do const fetch item so singular on this one i'm going to add a Seng here to it like so and here I can say Const fetch item it's gonna be equal to I'm gonna add weight fetch I'm gonna fetch this link and before I do that I'm gonna add back ticks like so and then I'm gonna say cons data it's gonna be our item it's gonna be equal to a weight and this is gonna be fetch item dot JSON so everything we pretty much did and the other one perfect and I'm just gonna cancel this so console.log item the response that we get back and now and the use effect I just want to call this function fetch item perfect I'm not gonna add this to the state yet just so we can see what's happening so when we go now to an a specific item it's gonna fetch that data however it fetches that data always with this specific ID but what if I want to fetch it with the ID that I'm going from here from the shop okay cuz here we are passing it in here so we have a link and we display the name and the cool thing is that when we link to something we get access to something in our props now let's take a look on what we get access to so when you do a link to somewhere and you arrive somewhere and here for this example this is where we arrive on this item detail page in here we get something so if we do curly braces we get access to something called match what is match Eady let's take a look console.log match so take a look we get access to a few cool properties here is exact true we get access to params the path that we're going to and the URL that we're going to but in this case what we need is that ID that we're passing in here so if we take a look here in params we get access to that IB so that's super cool because we can take out this I get IDs here and set it equal to the thing that we get from the router so we can delete that and where it says equal and I can just add a dollar sign and curly braces here and I can say match dot let's take a look it's gonna go match params and ID match params thought ID perfect hit save and let's let's take a look now we should be able to fetch a specific data matched to whatever item that we have some maybe I want to go to helium hit helium and look at that we're fetching all the details from the helium item and now everything is super cool because we can just add the star state and render everything out so the thing we're getting back here is an object so our set state is gonna be an object and here I just want to say set item to our item that we're getting back perfect so let's kind of render out let's see if we have a picture here or something we have in the images in here so there's gonna be item dot images dot information for example so we can also render out the name if we want so we can do item there's so much information here so you can go through these item let's go with name item dot name hit save let's see if that works and that works wonderfully there we go we can go back to shop and take a look at that we are getting back all the dynamic data let's take a look if we can do an image and we are gonna leave it at that item dot images dot let's do transparent hit save take a look that may give us an error because it's gonna say transparent is undefined and since this image is is another object in here it's gonna say transparent is undefined what we can do is just add images in here and set it equal to an empty object and as soon as it gets back that information it's gonna render out on the screen so there we go everybody take a look at that we can build a full-on dynamic website just with react router and the possibilities are super awesome in here whoo and that's the basics of react router this is one of those libraries that I usually incorporate in all of my projects because it's just a such an essential thing in every application so I hope you enjoyed this video thank you again so so so very much for watching please drop a sub if you haven't and turn on the notification so you know so you know when the new stuff is coming out also follow the socials Twitter and Instagram all right take care everybody and until next time but a being but a boo

Channel: Dev Ed

Views: 696,239

Rating: 4.9606342 out of 5

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

Id: Law7wfdg_ls

Length: 33min 10sec (1990 seconds)

Published: Sat May 04 2019