When trailingSlash is "always", anchor links in the <Link> component have a "/" preffix.

[LlaziG]

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

If the trailingSlash option is set to "always" - Gatsy adds "/" to Link elements if they are an anchor link.
The issue is fixed when trailingSlash is set to the current default - "legacy". However, in gatsby v5 the legacy option will be removed, the default will be set to always, and the gatsby-plugin-force-trailing-slashes plugin will be deprecated.

I believe the issue comes in this line:

gatsby/packages/gatsby-link/src/index.js

Line 67 in ccf70da

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

If the path is no absolute (meaning it doesn't start with any of the following: //, http://, https://), and it doesn't (it starts with a #) - we call absolutify(path, relativeTo)

Reproduction Link

https://github.com/LlaziG/gatsby-link-anchor-issue/

Steps to Reproduce

1. nvm use - to select a node version compatible with gatsby
2. npm run dev - to start the server in dev mode
3. go to the test pagecreated in the repo
4. Click on the anchor link

Expected Result

Clicking on the anchor link should scroll down the page and the final URL should be:
localhost:8000/test/#sectionOne

The URL in the rendered element should be "#sectionOne"

Actual Result

It redirects to the index page, the actual URL in the end is:

localhost:8000/#sectionOne

The URL in the rendered is actually "/#sectionOne"

Environment

Reproducible on any env, but here is mine:


System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Languages:
    Python: 3.7.5 - /Users/lazargeorgiev/.pyenv/shims/python
  Browsers:
    Chrome: 103.0.5060.53
    Edge: 103.0.1264.44
    Firefox: 86.0.1
    Safari: 15.4
  npmPackages:
    gatsby: ^4.18.0 => 4.18.0
  npmGlobalPackages:
    gatsby-cli: 4.15.1

Config Flags

trailingSlash: "always",

This is my gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `gatsby-link-anchor-issue`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  trailingSlash: "always",
  plugins: [],
};

[LekoArts]

You shouldn't use <Link> for anchor tags. Use a normal <a> tag for this, see https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/#reminder-use-link-only-for-internal-links.

So something like:

<a href="#sectionOne">Text</a>

[LlaziG]

Hmm, yes, but in the documentation is also written that you shouldn't use for external links, but it handles them. The anchor tags seems more logical to be resolved there as well.

What is interesting is that when trailingSlashes is set to ignore / legacy / never this issue does not exist.