@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.
4. It supports scroll restoration, which allows Gatsby to better control pages’ scroll position.

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

• Reach Router docs
• Video about using @reach/router in a standalone project (not Gatsby)
• Gatsby documentation on scroll restoration