CODEWITHSUNDEEP
javascriptreactjsgatsby
yangcodes
yangcodes

Reputation: 281

Gatsby (gatsby-plugin-transition-link) - refresh page when navigating to the same route

I'm using Gatsby's AniLink

import AniLink from "gatsby-plugin-transition-link/AniLink";
<AniLink paintDrip hex="#24B2D8" to="/home">
  <Image src={logoImg} width="220px" alt="Logo" />
</AniLink>

If I'm on a route that's different than home and click on the image (i.e: /about going to /home). It will seemingly route me accordingly, however if I'm on the home page already and click on the image then nothing happens. To improve UX, I want the page to refresh if the user attempts to navigate to a route that they're currently on. How would I go about doing this?

Upvotes: 1

Views: 424

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

Well, this is the expected behavior when dealing with Link component in React. AniLink it's an implementation of Gatsby's Link component which at the same time extends from @reach/router, from React. It won't refresh the page if you are trying to navigate to the same URL, that's the expected behavior because it has nothing to re-render, the rehydration never occurs because nothing changes.

That said, you can bypass this limitation by using the traditional anchor tag (<a>) which will force the navigation hence the page to re-render:

<a href="/home">
  <Image src={logoImg} width="220px" alt="Logo" />
</a>

Of course, you may need to add the paintDrip and the hex props by CSS or some other approach.

You can tweak this approach by only rendering this anchor if the user is on the home page, for the rest you can keep the AniLink component.

Upvotes: 1

Related Questions