Now we're going to extend that knowledge, and we're going to learn how to use the Link component inside of React router. And we're also going to clean up some of our code so that the homepage component is now going to store our list of portfolio items, because that's the way we're going to have our homepage, anyway, so we're gonna get a few things done in this guide.

Let me switch to Visual Studio Code, and let's first walk through how we can use the Link component. Now this is gonna be very similar to how we use NavLink, if I come and import it, I can say import Link, and that's in curly braces, from, and then react-router-dom. Inside of any of our components, we can now create a Link, so I'm going to add some more content here.

So let's imagine, because this is what we're going to do, that our blog is going to have a sidebar. So if you kinda wanna visualize it, if you go to the blog, we're gonna have all of our blog posts here on the left, and then we're gonna have a little sidebar that shows some content about us on the right. And so that would be, I think, a good place to have a Link if they want to read more about us, and that Link could go to the About Me page.

So I'm gonna wrap up all of this return content inside of parens. Now the parens are optional when you only are returning a single line of JSX, but if you're returning multiple lines, then you want to have the parens, just like this. And so this div is going to be a wrapper for our blog, and then let's also add, let's just say a h2 title here, just to make it clear, and then one more div, and this div is going to be our sidebar.

In the future, we'll be adding styles, and wrapper components, and all of that. And now we can use our Link, so I'm going to say Link, and the syntax for this is very similar to the NavLink. I'm gonna say Link to equals, and then just slash, about-me. And then you can add any content here you want, so you can say, "Read more about myself," anything like that that you want to have, hit save, and now we can go check this out and see if this is working.

So you can see here that we have Blog, that's changed to an h2 heading, and now we have this other link.

And if we click on it, you can see it does take us to the about-me route, so that is working perfectly.

There are advantages to using Link, it is more specific in the sense that, if you want to have a just standard vanilla link that also has that React behavior, if you notice, when you click on this link, it does not change, it does not reload the application, so this is different than using just a regular a tag.

What you don't get with it are some of those NavLink items, so you don't get the active class. And if you think about it, that's kind of a logical approach, because usually, if you are linking to another page, or another component in the application, then you're not gonna have that link on the active link but with a navigation bar, you would. So that's a reason why I would choose one versus the other.

So now that we have that, it's getting a little distracting, having all of this content here, when that should really be on the homepage. So let's go find that, and let's go move it onto the homepage. So you can see that we have all of this heading content, and let's go and grab that. And I'm gonna put this above the NavigationContainer, just to make it clear, and eventually we're going to integrate it into the Navbar, but not right now, that'll come in our style section.

Then this PortfolioContainer, and this is really some of the beauty on using tools like React, because if you were building this site in regular vanilla HTML, and you wanted to pull in all of this content, so all of these line items, and these links, and all of that kind of thing, then you'd have to copy a lot of code, and that can lead to a number of issues. But all we're gonna have to do is grab this PortfolioContainer component call, just like this, and then go into our home component, and then render it out, and that is it.

So let's do the same thing here, so I'm gonna wrap up what gets returned in parens, and then let's add another heading here, just to make it clear, and easy to see, that we're on the homepage and then I'm gonna paste in the PortfolioContainer call. Now we also have to import it at the top, or else we're gonna get an error. So I'm gonna say import, and then this is PortfolioContainer, from, now this is going to be a different path than our app path, so when we add PortfolioContainer, we were already at the root list of our component.

So I simply had to grab the portfolio, and then portfolio-container path. Ours is gonna be a little bit different, though, and it's worth actually taking a look at what this path needs to be. So if you click on the file system, you can see that we're in this home directory, and we need to navigate to grab the PortfolioContainer. So what we need to do is jump back one slot, so if we're in pages we need to jump back into our components directory, and the way we do that is with two dots.

So I'm going to, right here, be able to say ../portfolio/portfolio-container. So let's do that, and see if that works, so ../portfolio/portfolio-container, and hit save, and as long as I did not have any typos, then our PortfolioContainer content should be what shows up on our homepage and nowhere else now, and it looks like that worked.

So we have our nav component here, still at the top, but now, in our blog, it's no longer showing all of that other content, those portfolio items. Click on Contact, same thing, About, same thing, and Home, and there we go and everything is working. So this really speaks directly to how modular tools like React are. You have the ability, just by taking out one single line of code, rearranging how the content is called, and how it is rendered in the application.

Resources

• Source Code