[@reach/router] Call `useNavigate` hook to return an undefined

[nnmax]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

After I upgraded Gatsby 2 to 4, the useNavigate hook returned undefined.

After debugging locally I found that Gatsby introduced the following code three years ago：

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/production-app.js#L49-L66

  // In gatsby v2 if Router is used in page using matchPaths
  // paths need to contain full path.
  // For example:
  //   - page have `/app/*` matchPath
  //   - inside template user needs to use `/app/xyz` as path
  // Resetting `basepath`/`baseuri` keeps current behaviour
  // to not introduce breaking change.
  // Remove this in v3
  const RouteHandler = props => (
    <BaseContext.Provider
      value={{
        baseuri: `/`,
        basepath: `/`,
      }}
    >
      <PageRenderer {...props} />
    </BaseContext.Provider>
  )

This code was introduced in #15457.

But in @gatsbyjs/reach-router, the BaseContext needs to provide the navigate function, which is not provided in the above code.

https://github.com/gatsbyjs/reach-router/blob/master/src/index.js#L163-L167

// Sets baseuri and basepath for nested routers and links
let BaseContext = createNamedContext("Base", {
  baseuri: "/",
  basepath: "/",
  navigate: globalHistory.navigate,
})

I also noticed that gatsbyjs/reach-router#4 will remove navigate from the BaseContext in the next major release. But this may be an issue in the current major version.

For this reason I've raised a PR to fix the problem.

Reproduction Link

https://codesandbox.io/s/zen-cache-skx7yi?file=/src/pages/index.js:2989-3073

Steps to Reproduce

1. Open https://codesandbox.io/s/zen-cache-skx7yi?file=/src/pages/index.js:2989-3073
2. View the console panel
3. print undefined

Expected Result

useNavigate doesn't return an undefined.

Actual Result

useNavigate returns an undefined.

Environment

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
    npm: 8.18.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Languages:
    Python: 2.7.18 - /Library/Frameworks/Python.framework/Versions/2.7/bin/python
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 100.0
    Safari: 15.6.1

Config Flags

No response

[wardpeet]

This is a bit off-topic but what's the use case for useNavigate instead of importing navigate from "gatsby". We're planning to remove the useNavigate hook.

[nnmax]

This is a bit off-topic but what's the use case for useNavigate instead of importing navigate from "gatsby". We're planning to remove the useNavigate hook.

I also don't know why useNavigate is used instead of navigate, because the code is three or four years old.

Although using navigate exported from gatsby would solve the problem, useNavigate returns an undefined which is not an expected behavior. And it doesn't seem to be stated in the gatsby upgrade guide (or maybe I missed it) that useNavigate returns undefined.

This bug is extremely insidious. I wonder if anyone else has encountered this problem, or if they haven't found it?

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[LekoArts]

We'll be releasing Gatsby 5 very soon and as mentioned the hook was removed there. So while it's annoying that on old versions this can happen, every new user won't run into this. Thanks for flagging this tho, maybe some future Google users will find it.