React Router Full Tutorial - ReactJS Beginner Tutorial

[Music] hey guys how's it going i'm back here with another video and today i decided to bring here a full-on tutorial teaching you guys everything you need to know about react router so for those who don't know react router is actually a really really famous library in react it is almost like a standard for everyone who's learning react you need to be familiar and good at using this library and the reason for that is because react actually create single page applications so what react router does is it allows you to have several different pages in your application in your website where javascript will be constantly rendered into the page without having to reload the browser so for that reason i decided to make this full tutorial i'll go over every single thing that i think is important um to learn on react router from the beginning to the end and yeah that's basically it before we actually get into the video if you guys could leave a like that would massively help the channel the algorithm will definitely push this to more people and it will help the channel grow and allow me to make more videos which i would really really appreciate because i love making these videos so if you could leave a like i would really appreciate it okay guys so as you can see um we have a very very simple and beautiful react application it's beautiful because there's absolutely nothing inside of it you can see i've only like just created i ran create react app and i created a simple react application i just deleted some files unnecessary files if you didn't delete them it won't make any difference i delete that in the index.css the setup tests and also the logo those are unnecessary for this but basically you can see we have here our application it's completely empty and what i want to do is i want to show you guys initially how to install react router so to do that i'm going to open up my terminal over here and i'm just going to open up a new tab on my terminal because react is running on this terminal i'm just gonna open this up over here and as you can see every the only thing i need to do is i need to run the command yarn add react router dom like this and if you're using npm it's very simple it's just npm install react router dom when we press enter you'll see we will install our packages and i'll be back in a second when it finishes installing okay guys so as you can see um it finished installing which is great i'm just gonna clear this out and close this terminal we're just going to have one simple terminal running our react application and now that we have react router dom we can actually start using the library so what exactly does it do well let's look at this we have here a simple react application it's on localhost 3000 right so imagine you're you're going to create your i don't know a website portfolio it's just a website talking about your projects there's an about page there's all the different stuff right and you really want the user to come over here and imagine this is your website url and you want to be able to just do something like um slash about and it should go to the about page right currently this doesn't exist it doesn't matter what you put on top of here i can put whatever and it will continue to show like to show like the initial page whatever is supposed to be rendered and the reason for that is because normally when you have a website and it's not using react for example um you'll have several different html files and what you do is whenever you go to a different um route the server will fetch that html file and display in your screen however with react if you take a look at the structure it actually has one html file called index.html and everything should be rendered inside of that file so react router is perfect because literally what it does is it uses javascript to just whenever you go to a different route in your page instead of downloading a new html file it just shows whatever you you tell them to show so it shows a component into your screen which is perfect for us because um first of all it doesn't reload a website so if your internet speed is bad um it's definitely not gonna affect it and also because um it's all dynamic right it's perfectly um done so that um if you're running a react application it will work perfectly so this is the basic idea and to do that we're actually going to um create a website an example website so it's going to be similar like imagine you're creating a resume website and you have like i don't know three different pages in your website how would you actually handle this i would just start by installing and configuring everything related to react router dom so basically you would go to the highest component which in this case is app.js for example um and you would define your routes in this component it's it's it's the most common way of doing it so i would recommend doing it on the app.js so over here what you do is you start by importing some stuff from react router dom so i'm going to say import from react router dom like this and inside of here we're going to import some very important components so the first one will be we're going to call it browser router but we're going to say that we want to call it router and i'll explain what this means later but then we also want to import something called a switch then a component called route and maybe a component called link for now okay so basically what happens is when you're creating your routes you need to wrap everything around with a browser router but since the name is kind of annoying um you can say that i want to import this component and call it router and that's basically what we do and this is the standard i don't know why they just didn't call it browser router but but that's the thing right um switch it's basically a component that will allow us to display only one page at a time whenever we go to a route and route is a component which allows us to determine routes so what we do is we actually delete everything here and we can just return our router component as the highest order component as you can see right here and then inside of it we can pass a switch component to say that every route inside of this switch component will be independent from each other which means that if i want to have three web pages it won't be displaying those three web pages at the same time so that's why you need the switch component and inside of the switch we can now determine each different route or page that we want to have in our application and to do that you use the route component and inside of here we can do something like we can tell its path and the path usually is just the path name of the of the endpoint right so for example imagine this is the url of our website um and i want to go to the about page the path would be slash about right because that's what usually would happen so if we want to determine a route for the about page we could do something like slash about and that's how we actually determine it and then we also need to pass some different features for example we need to pass the component which will be rendered when we go to this about page right now we actually don't have we have we haven't created any component we haven't created the about page however this is kind of the idea right i'm just going to start by creating um a folder over here called pages and you can call it whatever you want i like to call it pages because i'm just reminds me that it is like a different page in the website and inside of here i would create all the different components all the different pages that i would have for example if i wanted to create an about page i can just create a file called about.js and inside of here we can write some code to show that about page so for example let me just write here in the about page very simply just say something like this is the about page we're going to change that later but just so you guys can see that this would probably work we just created a component called about and it can clearly differs from the component that we have here which doesn't say anything right so if i save this and i import this here at the top and i'll just close this on the side i'll just import um about from dot slash pages slash about so i just imported the component and it passed this component inside of here so about like this and we go to our page you'll see that first of all um let me just not refresh it yet let me go to the initial route this is where you would go when you enter your website right this is the initial route of your website but you can see nothing appears but if i go to the slash about you can see now that it says this is the about page so you can clearly see that it is correctly rendering everything based on the url that you're putting here at the top which is great it means it's absolutely working and it goes back to not showing anything if i go to another route however this is just the beginning of how to use react router you guys should see a lot more so right now what we should do is we should just create more routes so if we're creating a resume or a portfolio website we probably want to have a home page um so i'm going to say something like home.js an about page then a projects um like a projects page right to display my projects so for the three of them let's just um create the components where we just created the home component and let's create the um projects component and again let's just like do something very simple for now say something like this is the home page and let's say something like um this is is let me see this is the projects page like this and what we should do is we should actually now integrate both of these new pages into our router so how do we do that well what we can do is we can just do the same thing we did before we can just copy this route and paste it twice and now we just need to change both the path and the component that is being rendered so i'm just going to import the two other components to our file over here i'm going to import a home component i'm going to import a projects component and let's change this to home and let's change this to projects like this and now what we can do is i just i want to make the about component be this one so i'm just going to change this to be the home component and you might think okay so the path for this would be slash home right and it's totally possible you can call it home if you want however let's think about this we want the home page to be the page that appears when you enter the website right so this is the url imagine this is the url for your website it's like google.com or whatever your url is going to be so the actual path for this is isn't slash home you don't want to go to google.com home right um you want to go to just the url so the actual path for this is just a simple slash that's how you determine the path so over here if you want to determine this page to be the component that appears when you enter the website you just put a very simple slash like this and i want to say that i want to render the home component so i'm just going to put home over here then this should be the projects let's say projects and then let's just render the projects page let's see if this is actually working let's come over here and let's open up and you can see that immediately when we go to the url it already says this is the home page now let's try to go to the projects projects as you can see it says this is the home page as well but wait you can clearly see that it says this is the home page we're going to the projects and it's saying this is the home page now let's try going to the about page let's see why is this happening why is it just just displaying the home page when we try to go to every single route the reason for that is because we also need to give another property to each route which specifies that the route in itself should be actually independent from each other like we only want to display this route so to do that we very simply just come over here and say okay i want to display exact i want to make this just exact like this you just write exact on the on each route and or else what would happen is it would just display the first one that appears so that's that's the problem that's why it was only displaying the home page now if we save this you'll see we are in about page and now it says this is the about page if we go to the projects page like this it would say this is the project page and if you go to the initial page it will say the same thing let us think about this um if i go to like this it doesn't display anything right we're trying to reach a route that doesn't exist so what exactly do we do well the thing is um i've made a video on this in the past how to create like a a page not found and i want to show you guys really quick right here how to do that how do we create a route for all the routes that are that doesn't exist right i want to just display a simple message saying something like oh you reached a route that doesn't exist how do we do that well it's very simple you come over here and you just create another compo another route but you put over here a simple asterisk like this and this will say that everything every route that isn't determined here at the top should be matched with this and the component we can just create another component here called page not found like this dot gs and we can just customize it to however we want right now let's just say something like yo page not found something like this and let's see if it works right let's come over here let's import this at the top another component being imported and let's call it page not found and let's just import it from our folder and now let's render this component whenever you try to reach a route that doesn't exist let's see if it works let's go over here and immediately before i open this up oh i completely forgot as well to oh no it's already exact yeah so you can see we're in the homepage but now let's see what happens if i try to go to a page that doesn't exist you'll see it will show yo page not found if i try to go to another page that doesn't exist same thing if i try to go to the about page it should actually show the about page so this is basically how you handle that situation so now what do we do like we want to be able to actually navigate through our website without having to change your url here at the top right want to click on links that send us to other places and how exactly do we do that so in order to do that we're actually going to have to create a very simple navbar so just like a a simple navbar here at the top where there's going to be links right i'm not going to worry about styling it because it doesn't really matter at the end of the day i just want to have a simple navbar at the top which will appear on every single route right because you want to be able to net to use it on every single route so how do we do that how do we display a component that will appear on every single route and the rest of the route will be the only thing that is changing well in order to do that what we can do is we can come over here and we can wrap like this router around with a a fragment as you can see just an empty tag so that we can put more stuff and right over here we can actually put html or jsx on top of this router so what would happen is the page will be rendered and whatever we put over here like if we create a div over here and says something like um website um whatever is below like it will display this website thing and whatever is below is the only thing that will change based on the route so this is great because um you can just change specific parts of your website depending on which route you are in so for example you can see that every single route will show website if i go to the about it will also show website because it's above the the router um component right so this is the basic idea so if you want to create a nav board that should render everything we can very simply just do it like this we can now come here to our website or to our dev over here and we can start by creating um some some links right i just want to style this very very simple i just want to add a style over here say something like um with is equal to a hundred a hundred um and i wanna make this um vh as well so i wanna say like i'm a hundred v w to mean that i wanna make this a hundred percent of the the screen width and then i also wanna set the height to be like um 80 pixels something like this and i want to change the background color i'll just open this up a bit so you guys can see it better background color to something like um light blue like this right i just imported the color name here at the top so let's save this let's see how it looks um it's probably not going to look great but um it obviously doesn't look great it doesn't even show anything oh it doesn't show anything because we actually don't need to use this we just need to wrap this around with a string you can see that it displays a beautiful navbar that obviously looks ugly um obviously you can see um there's some merging and padding here at the left so to actually fix that i can just come here to my app.css access the body this is just something that happens with react applications if you want to remove the padding um and margin you can just say padding equal to zero pixels and margin equal to zero pixels i know that this is something that annoys a lot of people so that's why i'm showing it but you can see now that that's removed so let's get out of the app.css we can see we have a navbar here at the top now we want to put some links into it how do we do that do we actually just use a an a tag like a normal html like something like this home page something like this um you can you can actually do that but i wouldn't recommend it i would actually recommend using a built-in component from rectwater dom called link and we already imported link from the beginning as you can see what link does is it serves as a link as the name explains and we can very simply just do something like this um link and actually i won't make this like this i'll just actually wrap something over here and inside of here we can write the name of the link so for example if i want to create a link for the home page we'll say home and to determine where this link will like lead you to you can say to over here and you can actually pass the name of the route that you want to go to so if we save this and we actually paste this three times because we want to create a link for each route let's create one for projects and change this to projects create one for um about and change this to about and now what we can do is we can come over here refresh our page and and you can see that it says that um you should not use the link outside of a router this is actually a very very common mistake that happens a lot and it irritates a lot of like beginners because you won't understand like wait what should i do because this isn't part of the route like how can i use link inside of a router if it's not part of the route well it doesn't really matter at the end of the day right the switch is actually what's determining the routes so we can actually grab this router and put it here at the top and now we wrap everything around with router and we can use the link and it doesn't really matter because the only thing changing will be the bottom part so what happens is i can i'm in my homepage right can click on projects it will bring me to the projects page i can click on about it will bring me to the about page and it works perfectly as you can see i know the the links look ugly but again um styling isn't that important for this i have a video like talking about nav bars if you want to check it out i'm going to put a card here at the top um yeah i teach you guys how to build a really beautiful um like navbar in react so if you're interested in that go check out the video but now that we have learned how to actually navigate through our website it's actually starting to look pretty cool right we're able to go through different components and you can see it's super fast because we're not refreshing our page now what are some other interesting things that you can do with react router well there's actually something that you guys probably are not thinking about it right now but you'll definitely encounter when you're working in an application which is basically the case in which you want to click on a button and that button will redirect you to somewhere else right it will send you um to another page because technically you can't make like you're not making the the button a link right you can do that but it's not like it wouldn't be the most efficient way of doing this um what you can do is you can use an api inside of um react router dom called the history api and it's very it's actually pretty simple what i'll do is i'll go to one of these pages let's do something like the about page and i'll just create a button over here that says something like go to the no this is the projects page but it doesn't really matter so go to the about page something like this it's just a simple button you can see that it should appear up here if you go to the projects page over here what i want to do is i want to click on this button and i want it to change automatically this url to go to the about page so how do we do that well we can come here at the top and import from react router done a hook called use history and you can see immediately when i write use there are many different hooks that comes with this api and i'll go over use location and use program so if you're interested in that stay along in the video because i'll teach you both of them so use history is actually very simple just import the use history hook and you can come here to your project to your function and at the top you just need to create a variable called history and set it equal to use history like this you don't even need to pass anything over here and what happens is this variable here it's almost like it is a an array and this array will contain all the paths that you currently have been to and will automatically when you push something to this array to this list it will send you to that location it will like you will constantly be inside of the route that is the last element in this array so if you push something to this array it will just send you to that location if that if that doesn't make sense to you um you'll understand in a second you can for example come to this button and have an on click like this and this on click will very simply just come over here and we're i'm just writing a function inside of this on click and this function will just very simply say history dot push like this because it's an array and we want to send it to um the about page to the slash about this is all you have to do and now what happens is um let me just save all of this i hate this things that appear it's from an extension that i have so it doesn't really matter but um you can see that i just um pushed the about page to history when i click on this button so let's see if that works i'm in projects right if i click on this you'll see we're now in the about page let's come back and if i click on this again it will still send me to the about page and if you want to take a better look at this we can actually console.log um like this console.log the history variable you'll see what happens what exactly does this represent let's open up the console log over here so let me open up inspect let's go to the console and let me just close this okay that's fine now let's go to the projects page and let's click on this you can see that an array of 42 elements appeared and you can see there's many things it's actually an object sorry it's not it's not it's not an array but inside of it there's the push property which is um what we're trying to do and the great thing of this is it keeps track of previous locations so that's something interesting as well um if you want to use that that's definitely something that you should do i'd like to think this as an array because um you can basically go forward and go back as you can see right here um it's it's it's it's really really interesting there's many properties you can check out if you want to but this is how you actually navigate without using a link now i'm going to teach you guys about the other two hooks right we remember i showed you there's the use location and the use params right i'm actually going to use both of them at the same time to show you guys um what it means first of all i will show the use location hook because it's actually pretty interesting and it comes it comes in handy if you're creating a page not found component so basically the use location it's it's pretty self-explanatory by the name it literally just gives you all the information about your current location so let's check that out i'm going to come to my page not found component and i just want to import from this component react router dom and i want to import the use location hook so similar to the use history it's super simple just come over here create a variable called location um location and just say use location like this and basically this variable will have every single piece of information that you need to know about your current route about your current location so why is this interesting well you can just come over here and this this message will appear for every single user right but let's think about this let's try to customize this because if i try to go to a page over here that doesn't exist um it just says um yo page not found right we want to want to show something that is more um specific right so we can say something like sorry about that the page and we just put like we show the name of the page over here um doesn't exist so we're customizing this so that people will be able to see like that we actually know which page they're trying to reach and if we want to display the name of the page we can say something like okay we wanna the page location dot path name and this will show exactly what they tried to reach so let's check that it's already showing you can see right sorry about that i'll try to zoom in a bit so you guys can see it better it says sorry about that the page um whatever i put here doesn't exist if i try to go to the page um subscribe we should say um sorry about that the page subscribe doesn't exist you can see we're customizing this and there's many things you can actually do with the location api um you can come over here and you can like search for stuff you can um apparently hash stuff i've never like used every single thing from each um hook however there's many things you can do let's just leave this as location.pathname and finally the last thing i want to show you guys in regards to the hooks is basically the use params which is one of my favorites because params are really important if you're using an application and i'll actually come here to the home page and we're going to display it inside of our home page so basically for those who don't know params are ways to customize your um your like your route so that it's it's it's like getting variables from the url itself so what do i mean by that well imagine you're here in your application and you want to go to the page um i don't know like home and you want to search like you want to search for something right you want to go to the page home but you want to display um the home page for i don't know like for for myself for pedro imagine you have several homepages this doesn't make sense but like imagine you have several homepages and each one is different for each user so imagine you want to just display the one for pedro so you would go to slash home slash pedro but not necessarily you would create a a different route on your app.js just to specify like slash home slash pedro it wouldn't make sense to create one for each user similar to when you go to instagram or facebook you have a unique url just for you so how do they do that well think about this we can actually use this thing called params which will allow us to customize our link so that we can grab information directly from our url so to do that let's come here to our homepage and let's import at the top the use use params hook from react router. and to actually make this work we need to come to our home page that our app.js and we need to say that um this should accept some sort of um program and to do that we just need to come here to your to your page to your route and after the slash like for example in this case it's just like this but if you're wearing the projects you would put something like slash and then you put the the rest um but basically what you do is you put a variable that you want to grab from the url so for example let's show that let's customize it and show the name of the person we want to display in the homepage so i could create something like slash name and you need to put the column right here and this now is a variable that you can automatically put in the url and have access to whenever you have your page and what happens is now if i come here to my home.js i can come over here and create a variable this structure this from the use params hook like this and i can just grab the name variable like this name and now i can just display like this is the home page you are and i want to display the name of the person so you are whatever the name is on the params and now if i come here to my to the home page and go to slash um localhost 3000 slash pedro it should display this is the homepage your pedro if i change this to um slash whatever you'll see it will be exactly the same thing but this is still the home page it shows the same functionalities of this component over here however now we have we have access to this variable and why is this useful well there's many reasons for that for example if you're creating a profile page and for example think about instagram if you're creating a profile page maybe you can put here the id for a user like imagine the user is user on this number over here and you want to just display the the profile information about for this unique id then you could come over here and create a path a param called id and grab that id and make an api call something like that using that piece of information so that's basically it for the use per ms hook and that's basically it for our tutorial um we went over a lot of stuff on react router and this is definitely all you need to know in my opinion to get started and using react router into your application it's not that complicated of a library and it's really important because if you really are building applications that are going to be used in the real world it's definitely something that you should know and yeah that's basically it i really hope you guys enjoyed this video if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting three times a week and i would really appreciate it because it will massively help the channel grow and it's just been a lot of work so i really appreciate it if you guys could help me so that's basically it hope you guys enjoyed it and i see you guys next time [Music]

Channel: PedroTech

Views: 9,797

Rating: 4.9908886 out of 5

Keywords: react tutorial, reactjs, reactjs tutorial, typescript, pedrotech, traversymedia, clever programmer, freecodecamp, deved, pedro tech, react router, reactjs router, react-router, react router dom, react router tutorial, react router hooks, react router useparams, react router usehistory, react router uselocation, react tutorial for beginners, learn react js, javascript, React Router Tutorial | React For Beginners, react, redirect in react js after login, redirect in react js, redirect

Id: o__czqXJtqk

Length: 30min 43sec (1843 seconds)

Published: Mon Mar 15 2021