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

[jablonski]

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.

[MakowskiHubert]

Happening the issue for me too.

[xu3u4]

Same for me.

[daiky00]

same for me

[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