Check out a free preview of the full Introduction to Gatsby course:
The "Gatsby Link" Lesson is part of the full, Introduction to Gatsby course featured in this preview video. Here's what you'd learn in this lesson:

Jason links the Home page and the About page together using Gatsby Links, which uses Reach Router to reload only part of the page.

Get Unlimited Access Now

Transcript from the "Gatsby Link" Lesson

[00:00:00]
>> Jason Lengstorf: The next thing that we would wanna do is probably start kinda linking between these pages. So my instinct here is going to be to set up a link like this, and maybe this is what I do. Actually, let's make that look more linky and explain what it is.

[00:00:17] Let's add a HTML entity for a left arrow, and I'm gonna go back to home. And so this gives us a pretty simple back to home link, okay, that's good.
>> Jason Lengstorf: And when I click this, it takes me back to the homepage. But my homepage isn't hooked up to have any links or anything yet, so I can't go back.

[00:00:40] But I wanna show one thing, watch this flicker as I click between the pages, it's really, really fast because there's not very much content on this site. But what's happening is the entire page is reloading, and we don't want that, we don't want the entire page to reload, we want to make that smooth.

[00:01:00] And because we're generating a React app, we have the ability to do dynamic routing. So Gatsby comes prepackaged with Reach Router, and Reach Router gives us a whole lot of control over the location in the browser, the way that things behave, and we just get that for free.

[00:01:20] So you're able to, Gatsby link does a couple extra things, like pre-loading resources in the background and some other fancy stuff. So we've wrapped Reach Router, so we can just import link from Gatsby, this is a named export. And this link component has the same API as Reach Router's link component.

[00:01:38] So I can just change this out to be a link component. And instead of an href we're gonna use a to, so we're linking to the homepage. And when I save this, visually, it looks exactly the same. But if you watch, this is gonna be really subtle, that tiny little flash, it's not there, it's an instant reload.

[00:01:59] So this is what we really want, is we want this feeling of instant refreshing. It makes our app feel native, there is no reload phase. So let's go ahead and make the same change to our homepage. And so we're gonna go in here and just kinda do all the same things.

[00:02:17] I'm gonna import link from Gatsby. And then down here I wanna turn this into a, let's call it Home. And then down here I'm going to say, let's actually just get rid of this. Instead we're gonna say Hello Minnesota! And then we can just link to the about page.

[00:02:49] And I'm going to say Learn about me, and this time, we'll use a right arrow.
>> Jason Lengstorf: And I've got Prettier configured auto format on Save. So if you see my code jump around a little bit when I save, that's what's going on. Let me hide that sidebar so you can see what's happening.

[00:03:10]
>> Jason Lengstorf: And so these are kinda the fundamentals of Gatsby, you create pages and you link between them. And really, this is the only thing that you absolutely need to know to use Gatsby, is that if you have a pages directory here and you add files to it, we're gonna create pages.

[00:03:30] And if you want to link between those pages, you can use this Gatsby link. If you know those two things, everything else you can just kinda do it the way that you would normally do it, and it's usually gonna be okay.