Gatsby’s `Link` component is a powerful way to improve the user experience and simplify the development workflow when building Gatsby sites. It makes navigating between internal links instantaneous, creating an app-like feel, and provides helpers for various common use cases.

In this playlist, you’ll learn:

- Why and how to use Gatsby’s `Link` component for internal link navigation
- How to set styles for the currently active link
- How to apply active styles to parent pages and other partially matching URLs
- How to send state information in the props of the `Link` target
- How to replace items in the navigation history
- How to navigate programmatically using the `navigate` helper function

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

gatsby

Why and How to Use Gatsby’s Link Component

A common best practice is to provide a visual indication for which page is currently being viewed. This video will show you how to take advantage of the `activeStyle` prop of Gatsby’s `Link` component to customize the look of the currently active link.

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

When viewing pages that partially match the `to` prop in a Gatsby `Link` component, it’s often desirable to show that page as “active”, such as when viewing an anchor link to a heading on the page, or showing the “blog” link as active when viewing `/blog/my-great-post/`. This video will show you how to pass a function to `getProps` and identify partial matches using the `isPartiallyCurrent` prop.

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

If a link should include some kind of state information, such as which link was clicked, it’s possible to send that along using Gatsby’s `Link` component with the `state` prop. In this video, learn how to use the `state` prop to pass information between pages.

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

In some cases, navigating to a new page should replace the current page, meaning the “back” button will skip the current URL. For example, if a page leads to an interstitial screen, such as a confirmation page, it may be desirable to skip that confirmation if the user clicks the “back” button after confirming. In this video, you’ll learn how Gatsby’s `Link` component manages replacing navigation history using the `replace` prop.

Replace Navigation History Items with Gatsby’s Link Component

In cases where a `Link` doesn’t make sense, but you still need to navigate to a new page — such as a form submission — Gatsby provides a `navigate` helper for programmatic navigation. In this video, learn how to:

- Programmatically navigate to a new page using Gatsby’s `navigate` helper
- Send state information along with the navigation request

Navigate to a New Page Programmatically in Gatsby

egghead

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

https://app.egghead.io/api/v1/lessons/gatsby-why-and-how-to-use-gatsby-s-link-component/subtitles

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.

https://app.egghead.io/api/v1/lessons/gatsby-why-and-how-to-use-gatsby-s-link-component/transcript

https://app.egghead.io/api/v1/lessons/gatsby-add-custom-styles-for-the-active-link-using-gatsby-s-link-component/transcript

https://app.egghead.io/api/v1/lessons/gatsby-customize-styles-for-partially-matched-urls-with-gatsby-s-link-component/subtitles

Instructor: [00:00] In order to keep the active state for a link to decisions that has an anchor, or in the event of a blog where it was /blog/ the name of your blog post, we need to use something called partial matching. In Gatsby, we do this by accessing the props of the current nav item.

[00:21] Here, we're able to pass a function. That function gets props about the current link from Reach Router. We're going to see if part is-partially-current is true. Is partially-current comes back if any section of the two-prop matches the current path.

[00:42] What we can do is, we can say, if is-partially-current, then we're going to return a style prop. If not, we're going to return nothing. I'm going to save that, make it a little easier to read.

[00:59] Now in here, we get to override the style prop entirely, which means that we need to keep our link styles, so we can just spread those in. We also want to put in the active styles, so we're going to spread those in as well.

[01:14] Upon saving, we should see that even with our anchor, we still get the active state. Without the anchor, we're getting the active state as well.

[01:27] This is a great way to make sure that parent nav items stay highlighted even when subsections of the pages are being accessed.

https://app.egghead.io/api/v1/lessons/gatsby-customize-styles-for-partially-matched-urls-with-gatsby-s-link-component/transcript

https://app.egghead.io/api/v1/lessons/gatsby-include-information-about-state-in-navigation-with-gatsby-s-link-component/transcript

https://app.egghead.io/api/v1/lessons/gatsby-replace-navigation-history-items-with-gatsby-s-link-component/subtitles

Instructor: [00:01] In some cases, we don't want to keep every page that we visit in history. For example, if I choose waffles, I'm asked to confirm my choice. Once I confirm, I see what I've chosen. Then I'm told to press the back button to keep making decisions. If I hit back, I go back to this confirmation page, but what I really want is to be on the decision page.

[00:21] To fix that, we can use the replace prop in Gatsby's Link component. The way that that will happen is on the confirm page, where we have this Link prop, we can add replace. Adding the replace prop means that when we navigate to choice, instead of adding it as the next page we visited, it will replace the confirm page entirely in history.

[00:45] We can see how this works by going back out and choosing pancakes. Yes, I'm sure. Now, when we hit back, it goes straight to decisions. There aren't a lot of reasons why you would do this, but in the case of something like a confirmation page, it can make sense. It's helpful to know how it works.

https://app.egghead.io/api/v1/lessons/gatsby-replace-navigation-history-items-with-gatsby-s-link-component/transcript

https://app.egghead.io/api/v1/lessons/gatsby-navigate-to-a-new-page-programmatically-in-gatsby/subtitles

Instructor: [00:00] In some cases, such as when you're dealing with forms, you won't be using a traditional link. You'll be doing programmatic navigation. For example, when we submit this form, it should take us to a confirmation page. To test that, we can click, and it gives us a surprise.

[00:17] Submitting a form means that we need to handle navigation programmatically. To do this, we're going to use the navigate import from Gatsby. In our sign-up page, we can import navigate from Gatsby. In our handle submit, instead of doing it this way, which is not a great idea, we're instead going to navigate. Where we want to navigate to is our surprise page.

[00:50] Because we've submitted the form, let's include it. We're going to include the state. The state that we want to include is just the name. The name is set up here, in local state. We can then go into the surprise, grab the location out. Let's add the name. We'll do location.state.name.

[01:15] If we go back to our form, we can submit it. We'll see that it remembers what was submitted. It also avoids that jank of fully refreshing the page, giving us a much more app-like experience.

https://app.egghead.io/api/v1/lessons/gatsby-navigate-to-a-new-page-programmatically-in-gatsby/transcript

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

Jason Lengstorf

Course Content