In this video, Emmanuel Henri adds navigation and routing to the application. He first implements the router, and then adds the proper links to be able to click and navigate to new pages.
- [Instructor] An application or website wouldn't be one without any sort of navigation. So, let's go ahead and add react router to our application, implement proper navigation. So, the first thing I want you to do is go to the terminal, so let's click on View, Integrated Terminal, let's stop the server for a second, control C, and then do an npm, either i or install, save react-router-dom, like so.
Then while it installs this, let's close the terminal here. And let's go inside of the app here. So this is fine. So, this is related to the fact that we did the config for Airbnb, but we didn't install the dependencies in the last video, that's fine, that let's you do this on your own. So what I'm going to do for this particular purpose, we have this file in the exercise files on video for two, so from this point forward, we won't have these files, so let me remove it.
So it doesn't get that error every single time we go inside of a file. Now, let's import what we need to do routing. So first, what we'll do is import BrowserRouter as a router, and if you're not familiar when we do this, you're basically importing this dependency here from react-router, and we're going to import it as router, so when we use it, inside of our application, here we should use it as router.
Okay, so let's import Switch, let's import Route, and all this from what we just installed react-router-dom. And FYI, now react-router has the dom, and the react native library is separate as opposed, well, it was never separate, they just introduced react native in the react-router four, now split the dom and the mobile ones, so this is why we're importing react-router-dom as opposed to just react-router, as we were doing in version three, okay? So let's scroll all the way down to our render function here, and the first thing we'll do is wrap our little div here in router, like so, and let's cut this and paste it in between router, like so.
And let's make sure we do see our things here. And let's make sure we also do our indentation properly. Like so, okay. So what we'll do, after jumbotron, we'll use the switch and wrap everything down to the footer actually, so. What will happen here is we'll create one route for the feed, then we'll create two new routes for the Contact and About, so if you go back to the browser, right now we have a button for About, and a button for Contact, but we don't have any pages, or actual links for those, and we'll create that right now.
So, inside of a switch, we'll create preroute. So how do you create route is user route component and FYI everything is a component now in react-router four, and you tell it what path this particular component will load, so with this path, this component, will load, so those are two props that the route component takes. One tells it what path, and the other one tells it what component to load when we have this particular path, or call this path.
So, right now, we don't have a component for Contact, we'll create that in a second. We also will create another one, let's copy and paste this, for the About. And FYI, it doesn't need to be in the same order that your buttons are on the screen, it doesn't matter, so as long as you have them in here. So, let's create one for About. And the final one that we'll create for feed will be just slightly different, because right now, feed takes a prop.
When you take props inside of a route, it needs to be done a little bit differently, so let's do that. Let's do a route, and we'll call exact. So if that path is exactly ... this here, then render, so this is a different prop, but this prop basically will render this particular component here, so let me finish the code, and I'll explain what's happening. Render prop literally takes a function, so takes props, so we're basically doing as if we were rendering a component here.
We're doing this here, and then we are simply dropping our component here, so cut, and dragging it here, like so. Let's continue this, so right now what we're doing we have created three routes. We have one for Contact, one for About, one for the main page, and it will render this particular component here, so everything will be working properly. The only thing is that right now we don't have links to those, so we need to go to our navigation, and this is where we're going to fix that little issue that we got from es lit here.
So instead of doing href, what we'll do instead is a link, which comes from react-router, so we need to also import it. Like so, from react-router-dom. And then here, inside of our links here, let's do a link instead of href, so we'll just simply remove the href and switch it to a link, like so.
We don't need the active class anymore, so you can remove that if you want. So let's do the link and let's close it for now and the link to, and this is the proper syntax to do a link with react-router, but basically this states that this link is for the main page, and for this route basically, so when we click on this link, it will load the route here, this one.
So, let's finish this and make sure our link is outside. Let's remove the a element, closing element here, like so, and let's just simply copy this one here, remove the href here, and this one is About let's replace the a with a link and let's paste the final link here, and do Contact, and do the link.
Okay, perfect. So, let's save this. And the only thing we need to do now is create the pages for About and Contact, so we'll create simple pages with an h1 and we can pretty much copy the navigation here, because we're going to do a stateless component, so let's copy that, let's create a new component here, new file, and call it Contact.js. And in this one, let's paste, let's remove the link, let's remove everything here, except let's keep the h3.
Just do two in each one instead, and remove the class name. And remove this class name here, so let's keep it very, very simple. And let's do Contact, so we know we're on the right page, and make sure you change the name of your component, so I'm doing option click to select both of them, and this one is Contact, and save. Then copy the whole thing again, let's create a new component here, so right click, new file, this one is going to be About.js.
Paste the code, change basically all mentions of Contact, so option click here, option click there. And do About. Save this, and now all we need to do is import them in our main app.js file, so it's available here, because right now if you take a look, yes, Lynda is screaming about About. And it's screaming also about Contact, because it's not defined anywhere, so we don't have access to those components, so let's go ahead and import those from Contact and import About from About.
Save. Let's make sure everything is running properly, so load your integrated terminal. Make sure it runs, because right now it's not, so npm start. And let it run, and everything is running properly. We don't get any errors here, so links must not point to use a more descriptive, so let's go to jumbotron to make sure that jumbotron also has that corrected.
And let's simply remove that, we don't need that. So, let's remove to the reference to Hello World, save it, that error should go away. Okay, so let's test our routing. So right now we're on the home page as you can see. Everything is good. So, if we click that, nothing happens, it's normal, we're here. If we click on About, we get to the About page. If we click on Contact, we are on the Contact page.
If we click again on Home, we are back to home. So, now we have a navigation implemented into our application, so if you want to go ahead and add more stuff to the About or Contact page, feel free to do so.
- Creating a new React project
- Installing and working with React Developer Tools
- Dissecting a project into components
- Setting up the state with static data
- Adding and finalizing CSS in components
- Setting up and leveraging Firebase
- Standard code best practices
- Installing and setting up Flow for type checking