navigate() from function reference is causing full page refresh

[nickgrealy]

Description

When calling navigate() from a function reference, it causes the page to fully reload.

Steps to reproduce

Here is the minimum reproducible code, from the latest Gatsby version:

import * as React from 'react'
import { navigate } from 'gatsby'

const navTo = {
  page2: (state) => navigate('/page2', { state })
}

const IndexPage = () => {
  return (
    <div>
      <h1>Page 1</h1>
      <div><button onClick={navTo.page2}>BAD - Page reload</button></div>
      <div><button onClick={() => navTo.page2()}>GOOD - Page doesn't reload</button></div>
    </div>
  )
}

export default IndexPage

Versions:

"dependencies": {
  "gatsby": "3.0.4",
  "react": "17.0.1",
  "react-dom": "17.0.1"
}

Sample Project: https://github.com/nickgrealy/gatsby-navigate-bug/blob/main/src/pages/index.js

Sample Project Hosted: https://gatsby-navigate-bug.vercel.app/

Expected result

I expect the page should load using javascript (no full page reload should happen).

Actual result

The new page is fully reload - this is slow, and can be observed in the developer tools under "Network" tab.

Environment

Latest Gatsby 3.0.4.
Latest Chrome 88.0.4324.192
Node v12.14.1