Learn React #10: React Router Basics

hey everyone in today's video we're going to be learning about react router and how to use it in a simple react application react router is essentially one of the staples of every single react application and it's going to be the last thing we cover before we do a nice sizable react project in our next video now i've done react router a lot in the past with my material ui series if you're not familiar with material ui it's just a ui library like bootstrap for react and a lot of their components can use react router i've done videos with drawers i've done videos with tabs with headers and of course with breadcrumbs and i will link to all these videos in this description and you can get the code sadbox links for all of them for example here is one that i've made with the header where if you click the home page it will take you to the home page if you click contact it will go to slash contact and if you click about it will go to slash about we're going to make something similar in this video but obviously because we're not using a ui library like mentor ui it's not going to look as good but rest assured it will go over react router just as much as you need and if you find value in this video please consider leaving a comment liking or subscribing to the channel i can't tell you how much it helps get these videos out there and it helps with the youtube algorithm so thank you so much for everyone that's been doing that and i try my best to read every single comment and even reply in whenever i get the time to so let's dive right in react router is essentially what will allow your application to go from one page quote-unquote to another page and the reason i say that in quotes is because the url is changing but the actual page itself is not changing only the things that need to be re-rendered are going to be changing and if you remember my first introduction to react video we went over that and we looked at sites where for example on the walmart site when you click a different tabs let's go to the walmart site just for an example really quickly whenever you click a different link or a different tab the whole website would change for example when i click halloween you can see the whole website reloaded but for single page applications when you go to a different url you can see only the things that need to render and re-render will actually change and this is one of the coolest parts you can still use the back button to get where you previously were but of course only the things that are re-rendering are going to change on the page and you're not going to be reloading everything for example an entire header that you have we're not going to go into the header in this video and like i said if you want to see how that is done you can go ahead and watch the header video which is going to be in the description but we're just going to look at basic react routing so i'll zoom in a bit as you can see here i just have a simple sandbox.io application setup and in here i just have a couple of different buttons and i want it so that whenever i click on one of these buttons it will go to the respective url for that button as well as display the respective component you can see i've made three components for each one of these buttons one to represent the about us page these are very simple components all they say is this is the about page or this is the contact page or this is the home page and we simply just want to display that over here when we go ahead and click the button and go to that url so when it comes to react router there are three main uh components that you have to know about and when i say components i mean sort of steps that you need to know about the first thing is what is known as a provider now a lot of different components in reacts will have these things called providers especially when you start using more complex libraries like redux and for example this router library and what this does is it allows anywhere that this that any component in your application that is a child of this um router provider will be able to use the rest of the router components to put it simply so generally speaking when you have a provider you want to put it at the top level of your application if we go into the example that i was showing you guys before if we click on this index you can see here that in our case for react router we're going to be using something known as browser router and that browser router provider we are going to nest at the highest level of our application which is our index dot js so let's go ahead and do that and you'll see even in their example in their application they do the same thing but because they only have one main file which is just app.js because they wanted to keep their example simple they nested it at the top of app.js generally speaking you're going to be doing most of that in index.js because it wraps around app.js anyways so let's go ahead and import browser router and we're going to alias it as router and you can see here we haven't installed the dependencies so what we're going to do is we're going to copy react dash router dash dom which is the library we're going to use and if you're on code sandbox you can simply come here to add dependency type the name in and let's just make sure that's the right one yep so react router dom you can go ahead and click that if you are not on um code sandbox io all you have to do is go into your terminal where you have your application running and make sure you're in your directory type mpmi and then react router dom and that will install it for you and then you can go ahead and restart your application so now we have the library installed the first thing we're going to do is we're just simply going to wrap our application in our router component our browser router component that is aliased as router and we can go ahead and do that by just simply making some opening tabs and some closing tags around the app itself so the first step is done now everything that is nested inside of these router tags will be able to control things like the url in the application and they will be able to access um with specific hooks and stuff like that specific functions that will allow you to change the screen that you are on so for example now we can go into app.js and let's just implement the most simplest application that we possibly can so what we are going to do is you can see here in this app.js um we have the ability to for example create different routes in a switch statement and if you come over here in the react router documentation i'll scroll in a bit more just to this specific part the switch statement is sort of the main way that you determine what the user will see depending on what url they are on so within this switch statement you can see here they have multiple routes for example in this route they have um if the path is equal to slash about they are going to display the about component if the route is equal to slash users they are going to display the slash users component and if the route is equal to just slash they are going to simply display the home component and we're going to do something very similar in our application so i'm going to come over here in some cases it would be nice to because these switch statements can get quite big depending on depending on the application that you are doing you can put these switch statements in its own component and then import them here but for this video since we're just going over the basics of react router we're just going to put it over here so the first thing we're going to do is go ahead and import switch um and route from react router dom so i'm going to come over here we've we don't need this browser router anymore and we will get to link in a further part of this video so once we have those two things imported we can start with making our switch statement we'll just make the opening and closing tags and then in each one we can have a new route and let's make the opening closing tags for this one route and in this one route what we are going to do is we are going to add a path parameter so let's do the about page first we are going to add the path parameter here and then we are going to have the component that we want to display when the path is equal to that so for example we right now have the path for about so i'm going to go ahead and import about from about which is the component that i made over here before the video started and in here we're just going to simply call the about with self-closing tags now we're going to go ahead and save that and if i were to now go to our application on code sandbox and type in slash about as our url you will see here that below all of this stuff it displays the about you can think of these switch statements as just one big if statement that's saying okay if the path is about then display the about con component and we can go ahead and copy this logic and display the rest of the components as well so we can display the contact if it's a contact we can go ahead and import our contact component just like this and display it here and then finally uh for the home page let's just make it so if it's at you know the regular just slash it will display the home page so let's go ahead and import it as well and we'll make uh the component that displays home so now we can see here we're on slash about if i were to change that to slash content contact sorry you would see that it displays contact and if we would just go to slash you'll see it display slash now you might be noticing when i'm editing the url and clicking enter it reloads everything on the page not like what i said would happen in this sandbox.io where if i change the page only the content changes that is because in any application if you are editing it from the url itself and clicking enter it will no matter what perform a hard refresh and go to that page now we want to make it so if i click these buttons it will simply go to those pages now the way we can do that is a couple of different ways and i'm going to run you through each of them so the first thing we're going to look at is something called history.push now history.push is something that a lot of applications uh use but there and there are still use cases for it even now but there are sometimes even better ways to use it than history.push and what that will do is we can program each one of these buttons so that when i click it it will simply go to a different url it'll change the url and that's what the history.push function does so let's see if we can find any examples of that on here history dot push so in order to use history first of all we can use this react hook called use history where did they go use history okay we're on the documentation okay so we can see here that if i were to for example um that's weird it didn't straight up when i clicked it ironically enough it didn't uh link me straight here um okay here we go use history so this use history function is a hook and the history is actually an object that comes from um that comes from the router props now what i want to show before we go into this is what the um all the props that you can actually get and all the objects you can actually get from the um uh from the react router code so for example you can see here that in this example where i have the header in my material ui example when i do the route stuff i'm actually doing it a bit differently you can see here that i'm writing it all inside of the route and i'm just choosing what to display here and that is another alternative way to do it so instead of just having the route and then having the component you want to display nested inside of it you can also do it like this let me actually just copy the about since it'll be the exact same so you can see here let's take a look at how this code looks let me go ahead and zoom in a bit so you can see here for the route oops let's get rid of that what i can do is for example i can add a couple other parameters into my route component so for example this exact we don't have to worry about right now and we will get in into future videos but instead of having uh you know about as a child or the component you want to display as a child of these components you can actually nest it inside of a render attribute and when you put that inside of the render attribute you can actually pass in props which is going to be the react router props into the component so if i were to go into our about page and i were to go ahead and console.log the props to see all the props that are being passed in you will see all the props that inherently will come into the component from our react router and let's go ahead and oops let's go ahead and zoom this out a bit and make this a bit bigger now let's go ahead and refresh and go to the about page you will see here that react router will pass in and let me see if i can zoom in so it's a bit easier to read three props into our um component the first one is called history the second one is called location and third one is called match now you will use each one of these things in different use cases but for our examples i'll just give a brief a brief overview about what each one of these does history is what sort of stores the previous places that you have been and it is the object that will allow you if you do dot push to go from one place to another location will store the current path name that you are at and this is very useful to have for example if you are on a specific page and you want to know you know what page you are on um what you know slash you are on you can in the location object you have this path name parameter so no matter where you are in your application you can see what path you are on and make logic in your application for that and you might even see that in some of these material ui examples and then finally you have match and this is useful because you can have stuff like parameters in here so if you had query parameters for the page that you were on you would extract them from this match object and we're not going to go into complex examples like that in this video i might make another video going even more in depth into react router or in our project we might do that but um it's good to know that these are the things that you can do and that is another way you can sort of call the nested component if you wanted to pass any of these in there for this video we don't really need to pass any of that stuff in there i'll still leave it here for your reference if you were to come onto this code sandbox.io but um for this video we don't need to do any of that what we do however need is we need to find a way to get the history object hooked up to these buttons so when i click them it will uh simply go to that page that we are on so now we can go ahead and hide this again and make our code a bit bigger so what we can do like i was saying is use this use history hook this use history hook will allow you to um you can use it anywhere that is nested from our router provider and what you do is you just import it and what it'll do is when you define it it will just allow you to simply use the history object wherever you are without needing it to be passed in as a prop or anything like that so just over here i can say cons history equals use history and then on this button for example on the about us button i can create an on click handler and on click i just want to do history.push to the url that i want so that url okay sorry windows is trying to update as usual and then on click all it will do and i can add one for each one of these all it will do is call history.push on and then the url that i want it to go to so for the contact us i um button i wanted to go to contact us and then for the about i wanted to go to um about and for the home page i wanted to go to slash home so let's go ahead and hook that up refresh our application and now you'll see if i click the contact us page it will simply go to slash contact and display this to the contact us page if i go to home it'll go to just slash and display this the homepage and then about us it will go to about and those are all the working components that are really the basic knowledge you need to know about react router number one the provider you have to wrap your application around number two the switch statement that will is really just one big if statement that determines what component you want to show depending on what url you're on and then number three um your basic history stuff to determine uh what you want to push to and i'm finally going to show you one other way to do this without buttons and history.push so over here we are going to import a link component and you can see here in if i can go back to that example let's see i were to come back here you will see here that when they make their buttons they simply uh wrap them in these links and these links have a two parameter that will simply under the hood call the history.push and that's exactly what we're going to do so instead of having buttons here let's for one uh let's substitute that with the link component and then just have a two equal to slash about and let's go ahead and so you'll see here that it will display it as a link and when i click it let's go to a different page when i click it it will go to the about page so that's another way to do it if you wanted to for example have that show up in links and i think you could probably even nest it in the button let's try nesting that in the button close our tags you can see here that if you nest in the button it'll still show the like you know hyperlinking but i believe there should be like a prop or something like that um if i were to google like react router link props or something um you might see or if i uh even type in reactor link no hyper link um so a lot of people are some guys like how do i make it not hyperlinked a lot of people on stack overflow are like well just use history.push which is one way to do it um but i'm sure there is i'm surprised i can find it on the documentation for the link function um yeah well there's probably a way to do it i won't waste time trying to go into it in this video um but the link like i said it's just to illustrate that when you have the two attribute it will simply just act as a history.push under the hood so yeah that is pretty much it and i hope you found value in this video and if you did please remember to either like comment or subscribe it really helps with the youtube algorithm and i'm really excited for the next video which is going to be a project that is going to use everything that we have learned up until this point so hope you guys are staying safe and have an amazing day

Channel: Anthony Sistilli

Views: 10,963

Keywords: React Material UI, React Material UI Tutorial, React MUI, MUI, React, Tutorial, Material UI, react router, react tutorial, react router dom, react for beginners, react router hooks, react router switch, react router params, react tutorial freecodecamp, react router page transitions, react router history, react router tutorial, react routes, react js router, react router tutorial 2020, react tutorial 2020, react router dom history, react router dom link, react router link

Id: KSvfULhEor4

Length: 20min 1sec (1201 seconds)

Published: Sat Oct 24 2020