Discussion on: Awesome animated cursor with React Hooks⚡️

View post

First of all, it's a great tutorial. But I have an issue working with internal navigation components, like @reach/router and Gatsby Link. When I hover on those links, the hovering animation is triggered. But I click on them, the hovered prop doesn't change; it remains the same throughout the app (it's supposed to change to normal). It works perfectly for original anchor elements <a></a>. Have any ideas to fix this? Thank you for your great post!

Andriy Chemerynskiy • Sep 7 '20

Hmm, I was unable to reproduce it for @reach/router

Here is the sandbox: codesandbox.io/s/reach-router-curs...

Can you provide more details? 🙂

Richard Nguyen • Sep 9 '20

I figured out the way how to fix it. So, when I use anchor elements for navigating, the app reloads so the states reloads too. But with internal links like @reach/router and gatsby-link, the app doesn't reload so the state doesn't reload as well. My solution is to use the useLocation hook from @reach/router and put it in the useEffect's deps, like:

const location = useLocation();

useEffect(() => {
    addEventListeners();
    handleLinkHoverEvents();
    return () => removeEventListeners();
  }, [location]);

It will update the state whenever the route is changed.

I still have no idea why your sandbox is still working. But thank you for your response. Keep up with great contents like this one!