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