Full React Tutorial #21 - The React Router

Key Takeaways

all right gang so far our application only has one single page we don't navigate around to other pages we just have this single home page and most websites you create are gonna have probably more than one page so we need a way to introduce multiple different pages or routes in our react application and the way we do this in react is with the react router but before we talk about how that works let me refresh you about how a typical multi-page website works so then how does a typical website that's not using react handle multiple pages well we generally always start in the browser by typing a url in the address bar and hitting enter and that sends a request to a server for that address and the server handles it the server is generally going to send back a full html page which we then view in a browser now if a user was to click on a link in that website to another page like the contact page it then sends a brand new request to the server and then the server responds by sending back a new contact html page and we view that in the browser and the cycle would continue over and over and over as we click other page links in the website so we're constantly making requests to the server for new pages now react applications don't work like this they delegate all the routing and changing of page content to the browser only and it starts the same way we make an initial request in the browser the server then responds to that by sending back the html page to the browser but it also sends back our compiled react javascript files which controls our react application so from this point on react and the react router can take full control of the application so initially the html page that we get back is virtually empty and then react injects the content dynamically using the components that we create if we then decide to click on a link to a new page the react router is going to step in and intercept that request to stop it from going to the server and instead it's going to look at the new page request and inject the required content on the screen for example clicking on a contact link the react router will tell react to inject the contact component into the browser if we were to click on an about link it would tell react to inject the about component and so forth so this is generally the way the react router works we assign a top level component for each route or page and that component is dynamically injected into the browser when we visit that route now this whole process means that we're making less requests to the server and the whole website therefore feels faster and slicker so now we know from a bird's eye perspective how this works let's see how to set it up in our code so the first thing we need to do is install the react router package because it's not a part of the core react library now to do this we need npm and we need a new terminal so click on this and then we're going to type npm install and then it's react hyphen router hyphen dom and then i'm gonna use a specific version and that version is five and to do that i'm gonna say at five now this version is currently stable version 6 is in beta but that might change over the coming weeks and months so i didn't want to use that version in this series in case it does change but i will be doing a react router 6 tutorial once a stable release is here or at least once we have a release candidate but to follow along with this use version 5 like me and then you can always upgrade to version 6 in the future so press enter to install this and then once that's installed we can close this and just go to your package.json file and you should see now the react router dom package right here so version 5.2 all right then so remember when we install something it goes inside the node modules folder so if you're wondering where it's put that it's inside here so now we've installed that package how do we actually use it and set up routing for our application well the first thing to do is to go to the root component which is this app.js file and we need to import a few things from the react router package right here so let's do that first i'm going to import and then we're going to destructure a few things the first thing we need is the browser router and we're going to say as router and that means we can use the browser router that we're importing using this name inside this file so that's the first thing we want to import and we also want to import something called the route component and also the switch components so we'll see what these do as we go forward but for now let's say from react hyphen router hyphen dom okay so now we need to surround our entire application with the router component and what that means is that we can use the router in the entire application all components that are nested inside this app component have access to the router so let us now do that i'm going to surround this div with this router component so router like so and then we get the closing tag here let's place that at the end and scoot this in alright so that's the first step the next step is to decide where we want our page content to go when we go to different pages well i want it to go inside this div right here with the class of content so i'm going to delete that home component right here and i'm going to replace it with the switch component like so now this switch component makes sure that only one route shows at any one time now we're going to talk a little bit more later about how that works but just know for now all of our routes go inside this switch component okay so now we need to set up our individual routes so what we do is we create a route for each page that we have using this route component right here now we only have one page for now so we're just going to place one route inside this switch component but later on we're going to have other pages and more routes inside here as well so let's do our route for the home page so the route component like so and then let's get the closing tag as well and then we need to add on a property to the route component which is going to be the path now the path property oops that needs to be inside the route component let's cut it and paste it right here the path is basically the route so for the home page it would just be forward slash right if we were doing an about page it could be forward slash about if it was a contact page it could be forward slash contact basically this is the path after the route of our website so if our website was called the netninja.com or credit uk it would be the path after that part of the url okay so this is the path for the home page and what we need to do is nest the component inside this route that we want to show when a user visits this route so i want to show the home component so home like so and now what we're seeing is okay i want you to show the home component right here inside the content div when we visit just forward slash now notice the nav bar is always going to show because it's not inside this switch statement this is here for every single route it doesn't matter what it is but this content inside the switch is going to change dependent on the route as we build up more routes so let me just save this for now and let's preview this now nothing really should change because we're still using just the same home page but at least it does work just forward slash like so and we get the home page so next up we're going to add another route and talk a little bit more about this switch component that we've used right here