 Hi, this is Christian. So in this video, I'm going to show you how to just install the version 5 and then set this up very quickly so you can follow along the video. And so here is my example here. As you can see, if I go to the package JSON, you notice that I do not have the React router down yet. If you do have it installed already, if you accidentally install it, it should say React Router DOM and then it would do version number here. So I'm going to do that right now. So MPM install and then React dash router dash DOM. And I want the version 5. So you put the add symbol, follow up on the version number. Just the whole number is fine. What that would do is it will install the latest version, a stable version for version 5. So it will be like version 5.something, maybe 0.1 or 0.2 or 0.3. You don't remember which one. But we'll see. And it should update your JSON file. You can see here it added a version 5.3. So that's the latest, the stable version for version 5, which they stopped updating since then. So I'm using 5 now. And then now that's done. Then we're going to do here. Let me run the app first. Let me clear my console down here. And I'll do it MPM start. And that should launch my application. OK. So as you can see, it's once it's loaded. All right. So I basically display everything here on the page here. So I have my home screen here, my home component down here on my app, about component. And so those two here. So when I go to the about, you will see that the links does change to the slash about because I'm not using the routing yet. It's still showing the same content. If I go to the flight, it should have the flight and the URL, add, and so on. So notice also that when you click on these links, the screen flickers, or the browser window flashes. You can tell by this little refresh icon here. It actually spins a little bit, you can see. If you see that, notice it's not really smooth. And we don't want that. We want things to load very smoothly without refreshing the page. Because if you refresh the page, all your data is lost. We don't want that. So I'm showing here two components, the home component and the about component. I'm going to turn those off so that when you go to the home you should only show this part. When I go to the about, it will show only this part here. So back in the code here. And let's open up the app.js file. You can see I turned this off already. Just don't want to show them all yet. But notice I do have inside here my in return and app at the home component. And then I have the about, it in the footer and navigation as well. Okay, so the first thing you need to do is you need to import the browser router. You can do it here. You can add, you can wrap the router here or you can also wrap inside the index.js file, which I'll probably do it this way. It's actually better. So you can wrap the entire application using routes. So up here, I'm going to import the, I think it's called the browser. Let's see if you recognize it. Browser router, it doesn't recognize it. I believe that is what's called browser router from the, with the react router down, okay? From here. And so it's very long. So that's why I usually change it to just say a router. As an alias, the shortcut. And then now you can wrap this app tag with a router tag. So now everything is controlled by the route. And with that set up, let me close this down here. If you go back, as you can see, nothing changes here yet. Everything's still the same, but you see that the links are still flashing. And once you do that, you need to go to each of your navigation links and also anywhere else we use the a link and change it to using a different tag called link. Okay. So now I'm going to go to the navigation and semi-components and navigation and change all these a tag to use the link tag. And you get that again from the router react router. So I import the link component from the react router down. Okay. So now I'm going to go and change the a tag to use the link and change the href to the word too. Okay. And then just make sure you close it down here as well. I do the same down there. I'm going to copy and paste this quicker down here as well. Close that here. And then change that to two. Okay. Which I did already. Okay. So now if I save and go back to my page, you will see that navigation should be very smooth. Right? You see that these changes now, the route changes the page does not refresh any more. Okay. So give you that's very smooth prediction, but these two are not changing. So you can see it's still flashing. So I'm going to change that in the home component. And so I open on component and again down here, I have to change this a tag to link and we're, and also we need to import that in and change the href to oops. Yeah. That's correct. Change the href to two. That's to be two. And then here is also two and I need to import that from here as well. So import the link, oops, link. Link from the react router now. Okay. So that should fix that one. Okay. So we're done with that one. So now let's go to the route, which is inside this app here. And I need to wrap all these components here, whichever you want to include in the route inside a route routes pattern. So first we need to import the directives from up here. So we're going to import the routes. I mean, the switch, I'm using the older version version five and also need the need the route, the react router that I'm a keyboard. So as you can see a tight, very ugly here. Yeah. This is a tiny keyboard, which I don't like, but we're well. Okay. So now I'm going to wrap this whole thing here. I don't want to put it because the photo is not really in a route, right? So just the home from the home, put here the switch and then close it at the end down here right above the photo. Okay. And then each of these will be a route. Okay. So inside here you put here route. As you can see, I can then put my home route inside here like that, right? You wrap it inside here and same thing here. And we're just going to go and do that right now. Let me do a route here. So now I got my routes for each of these components and they will only load when you will match a certain route, a certain path, right? So here the first path for the home is going to be set to path equals, the pattern is going to be a forward slash. Okay. That is the home page. If I navigate to the link here, it will show the home page. So for example, if I save it now, I go back to the page, if I refresh it, you will see that all the other things are now gone because I'm actually now at the root of the home page, right? If I put a slash, I will see that here. If I go to the flight, you notice it was still, it didn't load, it still load the home page for some reason. And it should not do that, but let's see. So that will load the home. Let's fix all these here. So the path for the flights will be just flights for that one. And then this one here is as, I'll call it slash add. And then the edit, we need the path to edit, but also with an ID, okay? So edit then slash with a colon all about the ID key. Now you use ID, it's just very common. You don't have to use ID usually, whatever you want, okay? But this is important because whatever you said here, you need to do tree that when you load the component. And then down here, finally we have a path to the about page, slash about. Okay, so all my patterns are now set. Now, if I go back to the browser again, you notice that when we go to the page, it did not load. And so you have to kind of be very careful here how you place the order of these routes, okay? So you notice at the very top, we use the forward slash and this is like almost like a catch all type of route. So you don't wanna put it on the top here. That means if you put this in the top, then all of these routes will not be reached, okay? So what you're gonna do is you're gonna move this to the very bottom of the list. So I'm gonna just highlight that and use the old down arrow to move all the way to the very bottom before the, right before the switch is closed. Okay, so if I save that now and try again, I'm gonna go to my browser and so you can see that now I'm see the homepage here if I navigate to the about and here we go. So things are loaded perfectly as expected.