using reach router's navigate for hash links #169
Conversation
|
Preview is available here: |
| @@ -155,7 +155,7 @@ export const Link = ({ href, newTab, ...props }) => { | |||
| return <BasicLink href={url} {...props} />; | |||
| case LINK_DESTINATIONS.docs: | |||
| case LINK_DESTINATIONS.hash: | |||
| return <BasicLink href={url} {...props} />; | |||
| return <BasicLink onClick={() => navigate(url)} href={url} {...props} />; | |||
There was a problem hiding this comment.
Hmmm I'm not sure we should wholesale override the click behavior for BasicLink. I see there's a special case for hash links, maybe something needs to change there?
There was a problem hiding this comment.
Gotcha! I thought LINK_DESTINATIONS.hash would be for hash links. I like adding it to I tried with plain H2, H3, H4 by removing makeLinkedHeader!makeLinkedHeader but same thing still occurs. I can dig into it for another hour tomorrow.
There was a problem hiding this comment.
I'm going to update Gatsby and see if it fixes
There was a problem hiding this comment.
Some updates - hash anchor tags work fine in react components. Just the ones that are addressed in .mdx files seem to be broken.
Co-authored-by: Carl Vitullo <[email protected]>
|
Preview is available here: |
|
Something went wrong with PR preview build please check |
Problem:
On /docs' Run Core Node - configuring, for example, if you click links that are targeting hash links. They won't work most of the time (some of the hash links I clicked for the first time worked; I've tried multiple times on incognito, but happens randomly).
Gatsby's Recommendations for programmatic, in-app navigation recommends to use an
anchor tag(which what we were already using) orreach/router'snavigate.I implemented
navigatefor hash links and this fixes the problem. But it does feel hacky since anchor tag should work so I'd like you guys' opinions.It looks like there are scroll handling issues within Gatsby
Several Fixes for Scroll Handling and Restoration
Fix gatsby-react-router-scroll