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

[ezracelli]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• 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.

• @gatsbyjs/reach-router (powering navigate + useLocation) listens for popstate events
• browsers often don't fire popstate events for programmatic calls to history.pushState and history.replaceState

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

1. set the gatsby-config property trailingSlash to "always"
2. 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]

This is happening because in

gatsby/packages/gatsby-link/src/rewrite-link-path.js

Line 51 in 04ac1d6

return isAbsolutePath(path) ? applyPrefix(path) : absolutify(path, relativeTo)

the isAbsolutePath is false and then it goes through

gatsby/packages/gatsby-link/src/rewrite-link-path.js

Lines 13 to 27 in 04ac1d6

	function absolutify(path, current) {
	// If it's already absolute, return as-is
	if (isAbsolutePath(path)) {
	return path
	}
	const option = getGlobalTrailingSlash()
	const absolutePath = resolve(path, current)
	if (option === `always` || option === `never`) {
	return applyTrailingSlashOption(absolutePath, option)
	}
	return absolutePath
	}

It returns with

gatsby/packages/gatsby-link/src/rewrite-link-path.js

Line 23 in 04ac1d6

return applyTrailingSlashOption(absolutePath, option)

It should do the same as

gatsby/packages/gatsby-link/src/rewrite-link-path.js

Lines 34 to 37 in 04ac1d6

	const { pathname, search, hash } = parsePath(prefixed)
	const output = applyTrailingSlashOption(pathname, option)
	return `${output}${search}${hash}`

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]

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]

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

[Prathamesh010]

Close this. Fixed in #36798