Gatsby: Anchor links don't work in develop

[fk]

I have an element with the id hash on my page:

<h1 id="hash">Headline with #hash</h1>

When running gatsby develop, opening a new browser window and accessing http://localhost:8000/#hash, I expect the page to jump to the element with the corresponding id hash. It doesn't:

Only when I either

• open just http://localhost:8000/ and then add #hash to the URL in the browser address bar and hit "Enter" or
• run gatsby build and then open http://localhost:9000/#hash,

the page jumps to the element as expected:

Repo here: https://github.com/fk/gatsby-v2-anchor-link

[fk]

Tested in Google Chrome (latest, Version 67.0.3396.99, also in an incognito window), Firefox Quantum v59.0.1 and latest v61.0.

[fk]

develop: https://www.dropbox.com/s/a3d8w02863ie2j6/develop.mov?dl=0
build: https://www.dropbox.com/s/s0yrqh72v4cohig/build.mov?dl=0

[m-allanson]

Thanks for the repo and detailed writeup! I can confirm I'm seeing the same thing. I wonder if this is a v2 regression or something that's been around since v1?

[fk]

I think it's a regression—I implemented the sidebar stuff on v1 first and don't remember that tripping me up at all. I will have to check to be sure tho.

[fk]

Ignore what I said earlier, must have been dreaming—AFAICS same thing happens on v1: https://github.com/fk/gatsby-v2-anchor-link/tree/topics/v1

[ExiaSR]

Any update?

[pieh]

This PR solves this: https://github.com/gatsbyjs/gatsby/pull/6777

[fk]

🎉

[m-allanson]

This should be fixed in [email protected].

[alexfornuto]

I'm running Gatsby ^2.13.18 and am still experiencing this issue in develop mode with this project.

[Anahkiasen]

Still having this issue as well on latest version

[philipp-sapronov]

I have the same issue, v. of Gatsby is 2.9.4

[philipp-sapronov]

Hi Dylan,

Thanks for your letter, unfortunately I've already lost the context of this
problem, i think you've solved somehow this one.
If not, you can describe in more detail and send me.

You can try to write: const NavItem = styled(Link)/* styles */

If you see your link in inspector, but link is not
clickable, it means that something wrong with the page.

Try to write instead of and
check

вт, 7 янв. 2020 г. в 07:19, Dylan Davenport [e-mail]:

I'm having a similar issue using Gatsby version 2.8.23. I am using styled
components to style the Link for a nav like so:
const NavItem = styled(props => )
font-size: 1.4rem;
color: #eeeeee;
margin: 20px 15px 0 0;
padding-right: 15px;
text-decoration: none;
border-right: 2px solid #eeeeee;
line-height: 80%;
&:nth-child(4) {
border-right: none;
}
``
but none of the links are clickable. When I inspect the elements in the
console I see the href and I can access the pages by using /page-name. I
never had this problem and now suddenly it just popped up.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/6309?email_source=notifications&email_token=ALZKWXFBAZLRWPNZSEYRGT3Q4QGEXA5CNFSM4FIPO5RKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIHXLLY#issuecomment-571438511,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ALZKWXCMSUMZI7BHGVQTZN3Q4QGEXANCNFSM4FIPO5RA
.

[DRD161]

In my case it was me being a fool and not realizing I had an element overlapping the navigation 😅I got it working now though! Thanks for the reply nonetheless.