Gatsby (gatsby-plugin-transition-link) - 导航到同一路由时刷新页面

Question

我正在使用 Gatsby 的 AniLink

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

如果我在一条不同于家的路线上，请点击图片（即：/about going to /home）。它似乎会相应地引导我，但是如果我已经在主页上并单击图像，则什么也不会发生。为了改进用户体验，我希望在用户尝试导航到他们当前所在的路线时刷新页面。我该怎么做？

Answer 1

好吧，这是在 React 中处理 Link 组件时的预期行为。 AniLink 它是 Gatsby 的 Link 组件的实现，同时从 @reach/router 扩展自 React。如果您尝试导航到相同的页面，它不会刷新页面 URL，这是预期的行为，因为它没有任何内容可以重新呈现，再水化永远不会发生，因为没有任何变化。

也就是说，您可以使用传统的锚标记 (<a>) 绕过此限制，这将强制导航，从而使页面重新呈现：

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

当然，您可能需要通过CSS或其他方法添加paintDrip和hex属性。

您可以通过仅在用户位于主页上时呈现此锚点来调整此方法，其余的您可以保留 AniLink 组件。

Gatsby (gatsby-plugin-transition-link) - 导航到同一路由时刷新页面

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

javascript

reactjs

gatsby