Using Link from @reach/router is broken in Dev-Mode since 2.24.65

Description

Up to Gatsby 2.24.64 is was possible to use Link from @reach/router to link between pages. Starting from 2.24.65 you get 404-errors. We need to use Link from @reach/router in our project because we have to rebundle our components without a Gatsby dependency. With Link from “gatsby” it works fine.

I suspect that this issue is related to this fix, but I’m not totally sure:

https://github.com/gatsbyjs/gatsby/pull/27003

Steps to reproduce

Create a new starter project:

gatsby new gatsby-test https://github.com/gatsbyjs/gatsby-starter-hello-world

As src/pages/index.js use:

import { Link } from "@reach/router"
import React from "react"

export default function Home() {
  return <Link to="/page2">Page2</Link>
}

As src/pages/page2.js use:

import { Link } from "@reach/router"
import React from "react"

export default function Page2() {
  return <Link to="/">Home</Link>
}

Expected result

Now run it in develop mode. Clicking on the link works fine with Gatsby version up to 2.24.64, but results in the error page with 2.24.65 and above.

Actual result

With Gatsby 2.24.65 and above you’ll get 404-error page.

[sarahannnicholson]

As a workaround in development my process has been:

1. Click on a link that goes to the page I want
2. Get the 404 page
3. Refresh the page and then I get my page appearing. Which just reinforces that this is an issue with the linking.

Alternatively, going straight to the route you want works for me as well.

Can confirm this only happens on development, gatsby build is fine. Gatsby v2.30.2

[tracy-liucui]

We had the same issue, solved it by using gatsby link.

Gatsby link handles some gatsby-specified logic, if you want to make the reach-router link work the same, you should handle them by yourself. Mainly the hover event I guess https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-link/src/index.js#L223