We're also going to examine how the active status is and how that works, and also why we'd wanna use the NavLink component instead of some of the other options. Let's dive into that right now, so let's first create a contact and blog component, and we can also have those imported in our app definition.

I'm gonna come up here, and let's just create a few more lines. We're gonna have contact, make sure that goes to a contact page. And then let's also have the blog, and that will go to the blog page, so then down below we just need a couple more routes. This first one is going to be contact, make sure that maps to the contact component. And then one more route definition, and this will be blog, and that will be going to the blog component.

Now that we have those we actually have to create the files, and for right now I'm simply going to do what we did before with about and home, and create functional components as just place holders, and then we'll decide later on if we need to switch those from a functional component into a class component.

First one's going to be contact.js, and we can just add in a functional component here, with contact as a place holder. And then we're gonna do the same thing and create a new file called blog, and then let's add in that placeholder content, so that's just going to be blog, hit save.

blog.js

import React from "react";

export default function () {
    return <div>Blog</div>;
}

Now we can go into our navigation container and we can create nav links for those, as well. I'm gonna delete those place holders, create a few more, have one that goes to contact, and then one that goes to blog. Update the content inside of each of those and I'm gonna keep this place holder for add blog. Later on we're gonna be building a whole component that will have the form and everything like that, but we'll wait on that for right now.

navigation-container.js

<NavLink to="/about-me">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
<NavLink to="/blog">Blog</NavLink>

Now that all of that's in place, let's go test this out in Chrome. Gonna hit refresh just to make sure, and now if you click on about, you can see it shows the about content, contact shows contact, blog shows blog. All of this is working perfectly, and everything that we just did there is review. We've already gone through that whole process in Syntax, but it's always good to be able to practice these things again and reinforce them, especially if you've never done 'em before, and the last thing I wanna leave you with is if you right click on any of those links and click inspect, we're going to see something kind of interesting, and we saw this earlier, but we didn't really talk about it. Do you see how on blog, right here, do you see this is the route we're on? And it looks a little bit different in the code.

So, it gets rendered in HTML, is this actually has a class of active, but let's go check this really quick. We do not have a class called active, so this is something really neat that is brought in for us without us having to do anything with the NavLink component, and that is, it recognizes the page that we're on. So if you were to have say, a scenario where you want to have a special style for a link, if you happen to be on that page, and this is something that we are gonna be doing later on in the course when we get into the CSS section.

But say that you're on the contact page, and you want to have, maybe, a little bottom border and a different color font, something like that, that's kind of a common practice to follow. Well, how can you do that? How would you know if you are on one page versus the other? That is what the NavLink does for us, is it gives us this active class. And so what we can do is we can go and create our very own CSS class called active, and then whenever that has been added to one of these links then it'll pick up those new styles.

So that's really neat, and we get that automatically. If you wanted to override that, so the default behavior there is that, as you saw, it uses the className of active, and that's fine, in most cases that would work fine. But if you ever need to override that, what you can do is add another prop here, and it is called activeClassName. You can see that we actually even get some autocomplete here. And activeClassName can take a string, so this is just another prop, and let's say we wanna call it nav-link-active, you'll get to call it anything you want, but that's what I wanna call that. I'm going to copy that, and let's paste it for each one of these and also there on the home NavLink.

Now, if I hit save, and come back, what you're going to see, is that it now says nav-link-active. So you see that overrides that default behavior, and in many cases you may be fine just using the active class, but I wanted to show you what would happen if you ever needed to override that.

That is one of the key reasons why you'd want to use the NavLink component. In the next guide we're going to talk about a very similar component called the link component, and the key difference between the two, just as a little preview, is that NavLink has this really neat active behavior automatically built in where the link is more of a vanilla link that can direct you from one page to another.

Resources

• Source Code