- Read Tutorial
- Watch Guide Video
And so the goal of this guide is going to see how we can implement links, and how we can use those links to allow our users to navigate throughout the site. Now, the links we're gonna use are gonna be different than the types of links that you might be used to, using just plain vanilla HTML. And so these links are gonna be specific to React, and I'm also gonna discuss why they need to be React-specific links, as opposed to just regular a tags.
So let's get started, we're gonna add the links to our nav bar component. So let's switch to Visual Studio Code, and let's go and add those. Right now, we just have these two links, these two Routes, and that's fine, we can add the others after we have all of this working.
I'm gonna open up the navigation-container, and instead of buttons for these first two, we're going to use what are called NavLinks. And so NavLinks are a component specifically given by React Router DOM, once again. So I'm going to import these. So say import, NavLink, in curly brackets, and then from, react-router-dom.
So now we're gonna have access to use these NavLinks. And now, let's come here, I'm gonna get rid of Home and About, give us a little space, and now I'm just going to add these. So the very first one is going to be NavLink, and then we have to say where we want this NavLink to point to. So let's pass in the exact route that we wanna use, so in this case, this is gonna be the homepage, and let's also remember to use that exact.
Since this is for the homepage, kinda like we had to have exact here, in the Route definition, we also need to have exact here, in the NavLink. So now that we have that, we can close it off, and just say Home, and then have a closing NavLink tag. Now let's also do this for the about-me, we do not want this to be exact, it doesn't matter in this case. So I'm gonna say about-me, and then we can just say About.
navigation-container.js
<NavLink exact to="/"> Home </NavLink> <NavLink to="/about-me">About<NavLink>
So now let's save this, and let's see if this is working. So I'm gonna come up here and yes, you can see that these now look like links, and you can ignore the Contacts and Blogs, we'll take care of those later.
Now, if I click on About, you can see that it took us to the About page, so that is working perfectly.
And if I click Home, that took us home. So very nice, this is working perfectly.
Now, the very first question you might have is, if we are implementing this, why did we even have to import NavLink? Well, let's test it out. I'm gonna add another one, and I'm just gonna add a regular, plain a tag. So I'm gonna say a tag, href, and let's say slash, and then we'll say, Wrong Home, close off that a tag, and hit save. And so now, you can see we have this Wrong Home text.
Now, if I click this, I want you to pay attention to something. You see, up here, where the favicon is, if I click Home, the favicon does not change. If I click About, it takes us to that route, but the favicon doesn't change. Watch what happens if I click on Wrong Home.
Do you see how it actually reloaded the entire page? So the way React works, remember, is that it has a single page, that index.html file, and then it dynamically slides in our JavaScript code. So our entire application fits inside of that one file. When we use a regular a tag, we are going around the way React is supposed to work.
So instead of it being a single-page application, or being used like one, when we use regular a tags, we are trying to send the users off to the wrong places. We're actually trying to send them to routes that may not exist, and it will actually reload the entire application, and that is not what you want. That will cause performance issues, it will cause quite a few bugs, and so it's very rare that you'd ever use a a tag in a React application, unless you're pointing out to an outside system.
So if you have, say, a blog, and you want to point out to a different website, or something, then it's perfectly fine to use an a tag, because it really doesn't matter, you're going to be redirecting them to that other page anyway. But if you're using a link for an internal component, you wanna make sure to use the regular ones that are built into React Router.
Now, let's also inspect this link, so right-click on it, and let's see what we have access to here, I'm gonna give us a little bit more room. Now, this is kind of cool, do you notice how we have the a tags that are being generated? So from the perspective of the way React Router works, it actually generates a regular a tag. Now, there is quite a bit of JavaScript code that is watching for events, it's watching for the user to click on it, and that's how it's able to have that type of dynamic behavior.
But as far as what's generated, it is just a regular a tag, and so that is something that is important to know. It also gives us some extra metadata here and so we'll talk about that more. In fact, we're gonna talk about this whole class="active" element here. This is really neat, and this is something that's built directly into React Router, and we're gonna get into that in the next guide.
But for right now, I just want you to have the... or at least be familiar with the syntax for creating links inside of React. And if you're using navigation links, then I use the NavLink component here. We pass in the route, if we want it to be exact or not, and then the content. So very similar to if we used an a tag, except this is going to give us that dynamic and very performant React behavior.