@reach/router and Gatsby
This guide gives a peek under the hood of using
@reach/router with Gatsby.
The main reasons Gatsby uses
- Preloading. You can read more about preloading in the docs for the Gatsby Link API.
- The routing accessibility it provides.
- It supports server rendering which helps Gatsby build routed files at build time.
- 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
<Link /> and
<Link /> very nicely:
The component is a wrapper around @reach/router’s Link component that adds useful enhancements specific to Gatsby.
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.
- Reach Router docs
- Video about using @reach/router in a standalone project (not Gatsby)
- Gatsby documentation on scroll restoration