时间戳

首页 > 解决方案 > Gatsby (gatsby-plugin-transition-link) - 导航到同一路线时刷新页面

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

问题描述

我正在使用 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）。它似乎会相应地路由我，但是如果我已经在主页上并单击图像，那么什么也不会发生。为了改善用户体验，如果用户尝试导航到他们当前所在的路线，我希望页面刷新。我该怎么做呢？

标签： javascriptreactjsgatsby

解决方案

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

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

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

当然，您可能需要通过 CSS 或其他方式添加paintDrip和道具。hex

如果用户在主页上，您可以通过仅呈现此锚点来调整此方法，其余部分您可以保留该AniLink组件。

推荐阅读