Skip to main content

@reach/router and Gatsby

This guide gives a peek under the hood of using @reach/router with Gatsby.

Why do we use @reach/router?

The main reasons Gatsby uses @reach/router are:

  1. Preloading. You can read more about preloading in the docs for the Gatsby Link API.
  2. The routing accessibility it provides.
  3. It supports server rendering which helps Gatsby build routed files at build time.

With Gatsby, you will mostly be using the <Link /> component provided by the gatsby package. The <Link /> API docs explain the relationship between gatsby <Link /> and @reach/router <Link /> very nicely:

The component is a wrapper around @reach/router’s Link component that adds useful enhancements specific to Gatsby.

Client and Server Routing 🤝

Besides using the <Link /> API for linking between pages Gatsby generates, you can define your own client-side routes. See the client only paths example on how to use <Router /> from @reach/router to make client routes work seamlessly together with your server routes.

Other resources


Edit this page on GitHub
Docs
Tutorials
Plugins
Blog
Showcase