Creating Links

[00:00:00]
>> All right. So we've got our, site's still running. We can move here. We can go to our about page. This isn't particularly useful right now because we have to know the names of these pages to get between them. So why don't we set up some links. And now we could do, there's nothing wrong with just doing a planet link, I could do something like this.

[00:00:25]
And I'd click it and I would go home, but it does a full page refresh. We don't want that we want that Gatsby kind of app like experience. So what I'm going to do to make that work is I'm going to use Gatsby's link component, so we can just import that directly from Gatsby.

[00:00:42]
And then down here instead of using an a tag, I'm gonna use the link component and we use two instead of href. In the link component so we're going to link to home and let's maybe use different call this back to home. All right, so now we have this back to home.

[00:01:03]
Now watch this tab index and watch the fact that the page doesn't refresh. It did everything so fast that we didn't even see it. Cool, here's the other part that it does is it's got this Gatsby announcer and so you see how it says that we navigate it.

[00:01:20]
So let's go back. So, we're at about this site. So, then when we click, here we go navigated to Hello masters or Hello friend masters. And that sort of like what Gatsby is doing to make things more accessible. It looks like it's happening so fast that we can't see some of it, but that's the gist of what's going on.

[00:01:42]
And then we can do the same thing on our homepage. So let's just copy paste this link. Right, and then we can drop this in here. We'll do a link to, and we're gonna go, to about ,and say, about this site. Okay, so now that we've created these two links, we can bounce back and forth, and you can see that what's happening is it's changing without having to fully reload the page.

[00:02:09]
So this gives us that app like experience that we're after, we are able to navigate between pages. Based on routes we can navigate directly to these, if I refresh the page, I'm still on about. So this isn't like a fully single page app style where we can go to any page, but if we refresh it resets us back to the entry point.

[00:02:31]
This is, we enter in the path that we wanna be at, and then it mounts as an app. We get that single page app like experience. It's very app like no page refreshes and all those good things. So that is linking and fortunately, the the linking and Gatsby is Is just really simple.

[00:02:53]
It makes me happy when an API works like this because it feels easy. I like it when things feel easy. I shouldn't have to think very hard about getting this stuff to work. What I should also show though, before we move on, is something really cool about Gatsby is if we refresh this, let me make this bigger so we can see what's going on.

[00:03:21]
Let me clear this and let's refresh that page again. Okay, so we have our page data, right? Now watch when I hover over home, to see how it just loaded that index.js it just loaded the component that we need, so that when we click, it's already there. So this is another thing that Gatsby is doing in the background when you hover over a link.

[00:03:47]
It'll start prefetching data so that you don't have to wait as long after you click that link. And a lot of times, I'm going to go here and I'm going to click, that's maybe 500 milliseconds. 500 milliseconds can make a big difference, if something happens in under a second or so, it feels instant.

[00:04:05]
It's a very nice experience. And if the difference in me clicking is one second or one and a half seconds in terms of how long I wait, that can make the difference between my app feeling, a little slow, or native. And that's, the little things that we all want to do when we build custom apps.

[00:04:27]
But we don't have time for, and so you just end not doing it right? Gatsby builds that in. So now instead of wanting to do it and not having time, you don't even have to think about it, it's just automatically there.