gatsby-link

What is gatsby-link?

The gatsby-link package is a part of the Gatsby framework, which is used to create fast, modern websites with React. The gatsby-link package specifically provides a Link component that enables navigation between different pages in a Gatsby site. It leverages the power of React Router and adds enhancements for preloading linked resources, making navigation faster and smoother.

What are gatsby-link's main functionalities?

Basic Link

This feature allows you to create a basic link to another page within your Gatsby site. The 'to' prop specifies the path to navigate to.

<Link to="/about/">About</Link>

Active Link Styling

This feature allows you to apply a specific class to the link when the current page matches the link's destination. The 'activeClassName' prop specifies the class to apply.

<Link to="/about/" activeClassName="active">About</Link>

Partially Active Link

This feature allows you to apply active styling to links that match a part of the current URL. The 'partiallyActive' prop is set to true to enable this behavior.

<Link to="/blog/" partiallyActive={true}>Blog</Link>

Preloading Links

This feature allows you to preload the linked page's resources when the link is rendered. The 'preload' prop is set to true to enable preloading.

<Link to="/contact/" preload={true}>Contact</Link>

Other packages similar to gatsby-link

react-router-dom

react-router-dom is a popular package for handling routing in React applications. It provides a set of components for declaratively defining routes and navigation. Unlike gatsby-link, it does not include built-in preloading of linked resources, but it offers more flexibility and is not tied to Gatsby.

reach-router

reach-router is a small, simple router for React that emphasizes accessibility. It provides a similar Link component for navigation, but it does not include the preloading capabilities of gatsby-link. It is known for its focus on accessibility and ease of use.

README

gatsby-link

A <Link> component for Gatsby.

It's a wrapper around React Router's Link component that adds enhancements specific to Gatsby. All props are passed through to React Router's Link.

Gatsby does per-route code splitting. This means that when navigating to a new page, the code chunks necessary for that page might not be loaded. This is bad. Any unnecessary latency should be avoided. So to avoid that, by default, Gatsby utilizes a Service Worker that precaches code chunks so navigating to new pages is quick. But as there are several popular browsers that don't yet support Service Workers (Safari, IE, Edge), this component will also preload code chunks on these browsers.

Install

npm install --save gatsby-link

How to use

const Link = require('gatsby-link')

render () {
  <div>
    <Link
      to="/another-page/"
      activeStyle={{
        color: 'red'
      }}
  </div>
}