anchor links have a trailing slash appended when using `navigate()` with `trailingSlash: "always"`

ezracelli commented 2 years ago

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

this is almost the same issue as #36071, but for the navigate function provided by gatsby. in this case, extra slashes are appended to the URL rather than prepended (e.g. #hash becomes #hash/).

the solution provided in #36071 (using native browser APIs) does extend to programmatic navigation, to some extent; for a hash update that pushes to the history stack and doesn't require updating the history state, it's possible to assign directly to window.location.hash. however, this gets a bit clunky for programmatic navigation using the History API, which is necessary for emulation of the replace or state options of navigate.

this combo means that a simple reactive hash change requires:

window.history.pushState(state, '', hash);
window.dispatchEvent(new PopStateEvent('popstate', { state }));

this pattern (calling navigate() with only a URL hash while using trailingSlash: "always") should be supported out-of-the-box, as Gatsby's own documentation might suggest it is.

Reproduction Link

https://codesandbox.io/s/charming-feynman-frhw59

Steps to Reproduce

set the gatsby-config property trailingSlash to "always"
call navigate("#hash") from anywhere

Expected Result

When calling navigate("#hash"), the page hash should change to #hash

Actual Result

When calling navigate("#hash"), the page hash changes to #hash/

Environment

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - /private/var/folders/q9/63kh50rj6sg1qqhckjzwj3880000gp/T/xfs-1f9f3d4d/node
    Yarn: 4.0.0-rc.22 - /private/var/folders/q9/63kh50rj6sg1qqhckjzwj3880000gp/T/xfs-1f9f3d4d/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Languages:
    Python: 3.10.6 - /usr/local/bin/python
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 98.0.2
    Safari: 16.1

Config Flags

N/A

LekoArts commented 2 years ago

This is happening because in https://github.com/gatsbyjs/gatsby/blob/04ac1d6cb45df198ab01d119ce051d5f59b9ccb9/packages/gatsby-link/src/rewrite-link-path.js#L51 the isAbsolutePath is false and then it goes through https://github.com/gatsbyjs/gatsby/blob/04ac1d6cb45df198ab01d119ce051d5f59b9ccb9/packages/gatsby-link/src/rewrite-link-path.js#L13-L27

It returns with https://github.com/gatsbyjs/gatsby/blob/04ac1d6cb45df198ab01d119ce051d5f59b9ccb9/packages/gatsby-link/src/rewrite-link-path.js#L23

It should do the same as https://github.com/gatsbyjs/gatsby/blob/04ac1d6cb45df198ab01d119ce051d5f59b9ccb9/packages/gatsby-link/src/rewrite-link-path.js#L34-L37

We have unit tests for this that should also check this https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-link/src/__tests__/rewrite-link-path.js

rokaicker commented 2 years ago

Hi @LekoArts, would it be alright if I try to takcle this? I'm relatively new to open source development, but I think this would be a cool thing to work on.

Prasundas99 commented 2 years ago

Hi @LekoArts , If this is open please assign it to me it would like to give it a try

Prathamesh010 commented 2 years ago

Close this. Fixed in #36798

gatsbyjs / gatsby