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

All components and utility functions from this package are now exported from gatsby package. You should not import anything from this package directly.

The API reference has more documentation.