Why and How to Use Gatsby’s Link Component

Add Custom Styles for the Active Link Using Gatsby’s Link Component

Customize Styles for Partially Matched URLs With Gatsby’s Link Component

Include Information About State in Navigation With Gatsby’s Link Component

Replace Navigation History Items with Gatsby’s Link Component

Navigate to a New Page Programmatically in Gatsby

Use Gatsby’s Link Component to Improve Site Performance and Simplify Site Development

For local navigation on Gatsby sites, the `Link` component provides a built-in solution for improving the performance and user experience on your site. The video will teach you:

- When the `Link` component should be used
- How to use Gatsby’s `Link` component

Instructor: [00:00] The Gatsby Link component is a great way to make your sites feel more performant. This site is not using the Gatsby Link component. As we click around we can see that the pages are fully refreshing. It feels a little bit janky.

[00:18] The first thing we want to do is look for any instances of anchors that link to internal pages and replace those with Gatsby Link. Let's start in our header.

[00:28] The first thing that we'll do is import { Link } from "gatsby". Then we're going to come down here. We can replace this with link almost outright. The main difference is that instead of the href we use a {to}. If we save this, we'll be able to come out here and we'll see this one that we haven't replaced, these are still causing that flash, but if we use the one that we just replaced with the link, it's instantaneous.

[00:56] This makes it feel like you're using a web app because you are. Under the hood, Link uses reach/router to prevent a re-render whenever you click a link. Let's go ahead and continue by replacing all of these links.

[01:11] In this particular site example, the navigation links have been wrapped with a NavLink component which makes it easy for us to refactor. We can import { Link } from "gatsby". Replace it here. Change this to {to}. Now our navigation feels very app-like. There are no flashes. Things work the way we expect.

[01:39] However, this link is still causing a full refresh. When we jump around on pages like this we're still getting that jump. We can go into our pages and make these same adjustments. We can import { Link } from "gatsby". Down here in our page body we do the same thing. We're going to link to. On the home page, when we click "Make some decisions," we get an instantaneous link.

[02:21] Let's find the rest of these. We're going to find in files. We're going to look for anything with an href. That will allow us to jump in and fix these. This one here is a link to gatsbyjs.org. We don't want to use Link for this. Link does not support external websites. Again, under the hood, Link is using reach/router, which is for local routing only.

[02:48] Here in our confirmed page, we are using it. We can fix these and change this. Make sure that we are importing { Link } from "gatsby". Save that one. Let's go to our Decisions page and make the same change from "gatsby". Then we can come down here. Anywhere that is an href we can change it to a link {to}. Look for those closing link tags. Change those to links.

[03:39] With that change made, anywhere we go on the site, we should be able to get instantaneous page changes, with no lag or page flicker as we move through, and our site feels extremely app-like.

Course

Use Gatsby’s Link Component to Improve Site Performance and Simplify Site Development

Why and How to Use Gatsby’s Link Component

Share this video with your friends