React Router Tutorial - Setup in 5 Minutes

what's up everyone I want to show you how to set up a router and react in five minutes so let's go ahead and dive on in first off this video is sponsored by the ultimate freelancing bundle on study web development comm I'm a huge believer that as web developers we have the ability to create products and you can do that for yourself or for other people whether you want a freelance part-time to earn some extra income or try to make this your full career this bundle is gonna have some great tips and templates and strategies for you to follow to go and build that clientele and grow your business now if you're interested check out the bundle and use the coupon code JQ 20 to get 20% off the entire bundle I think it will be well worth your time and you should definitely check it out to start your career as a freelancer alright we're gonna go ahead and setup react router in five minutes here using this react router domme package from NPM and first I just want to show you there's not really a whole lot going on I've basically got a starter react application using create react app I took out all of the the base stuff that's an app j/s just added a little paragraph tag here to say we will add routing and then I've created a directory inside of source for pages and there's a home component which is really simple obviously and then an about component so let's go ahead and let's stop the live server and let's install react router Dom so we'll install this package and then there's a couple of things we're gonna need to do we're going to need to import the actual router into our app GS so basically what we're going to do is surround our app with the router and then conditionally display the pages based on which route the user is on so what we'll want to do is I'll do an import and this will be fun as soon as that package finishes installing we're gonna import route and then we're also going to import the browser router and most people in most documentation I see they rename this so browser router as router and then we'll do that from react router da so with those things imported here now we want to wrap basically this entire container with our actual router so we'll go ahead and surround this thing with our router and then what we want to do is have a place where we're actually going to put the different things that we want to display so we can have those be our routes so if we have a route and then a path each route will have two properties a path and this will be the route and a component and in this case we'll have our home component all right and then I need to import this so we'll need to import both home and about so import home from pages and then home and then we'll do the same thing for about so import about from pages slash about so I'll have both of those and we'll just create a new route here so a second one for slash about and this should be the about page all right so let's save that and then let's run npm run start again to start our live development server we'll get this thing up and running here and hopefully what we'll see is that we see once this finishes loading we see home and then if we come to slash about we'll see something weird it's about n home and the reason is this is a little bit odd but basically the root path here is also a match for a slash about so when we have things that might be sub routes of each other we need to potentially mark them as exact so what this means is only render this home component if this met this path matches exactly so if it's just a slash and not anything else so if we come back now we see there's the about and here's the index which is our home now if you wanted to solve this in a slightly different way you can use a switch in react router so we can bring in the switch and with this we can wrap all of our routes inside of a switch so switch here and what this is going to do is it's only going to choose one of these paths so we can get rid of exact and then it's only going to choose one of these routes inside of here so only one of those will show at a time and it'll be the first one that matches so this will work although it will be a little bit odd as well because we come to slash about it's slow it shows also slash home now this is again for the same reason that home also matches so you could either mark this as exact again and now you'll see about or you can mark this without the exact and then just have it come after the Abell so basically it's going to try to match this thing first and if it matches it'll take that and then this one second so here we should see the same thing so that's using the switch there so that's pretty cool and if we come back home we should see the home page and then lastly we can just add a little tiny nav here just for testing so let's do let's get rid of actually we could put all of this stuff inside of our container and let's get rid of this and let's do a little bit of an F and it'll have a ul and a couple of Li items and what we want is each of these to be links to the different pages so actually instead of or within the align will have a link and we'll get some Auto formatting here in a second but we need to import the link here as well and a link is going to have a property of a two so this will be its a slash and this will be home and then we'll duplicate that and say about and slash about now the reason you want to use the link component from react router dumb is this will do client-side routing so if you just use your regular anchor tag with an href it will actually reload the entire page with the link tag inside of react these are going to use client-side routing so you're not reloading the entire application you're just changing the page so let's come back over and you see you've got our two links they look maybe these aren't formatted correctly and they're not because this other one should go inside of an Li and this is obviously not going to look very good but just to show you how to set this up we've got our home page and we've got about and we can switch between them so we just set up routing in our react application in about five minutes here we talked about the browser router renaming that thing to a router to wrap everything in our app j/s creating the individual routes using a switch to be able to choose between different routes and then using a link for client-side routing as well I really needed this as a reference for myself hopefully this is a really quick and nice reference for you going forward as well hope you enjoyed the video and I'll see you in the next one

Channel: James Q Quick

Views: 52,475

Rating: 4.9353681 out of 5

Keywords: react router, react router dom, react tutorial, react router setup, single page application, client-side routing, react for beginners, react switch, react routes, web development, react router v6, react router link, react tutorial for beginners, react tutorial 2020, javascript, javascript tutorial, react for beginners 2020, reactjs tutorial for beginners, react routing to another page, react routing 2020, react js crash course, reactjs 2020, react router tutorial, react

Id: yQf1KbGiwiI

Length: 6min 30sec (390 seconds)

Published: Tue Jun 09 2020