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

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

Jason Lengstorf

Course Content