@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:
- 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 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.