Gatsby使用gatsby-plugin-transition-link的AniLink点击同路由如何刷新页面

AniLink 基于前端路由封装，默认跳转目标与当前路由一致时会静默忽略操作，你可以通过路由判断加自定义点击逻辑实现需求，有两种常用实现方式：

方案1：封装通用自定义AniLink组件（推荐，可复用在所有链接场景） #

1. 首先引入路由钩子与AniLink

import { useLocation } from "@reach/router"
import AniLink from "gatsby-plugin-transition-link/AniLink";

2. 封装增强组件

const CustomAniLink = ({ to, onClick, ...restProps }) => {
  const { pathname } = useLocation()
  
  const handleClick = (e) => {
    // 目标路由与当前路由一致时触发刷新
    if (to === pathname) {
      e.preventDefault()
      // 若不需要全页重载，可替换为自定义逻辑：比如回到顶部、重置页面状态
      window.location.reload()
    }
    // 透传原有点击事件
    onClick?.(e)
  }

  return <AniLink to={to} onClick={handleClick} {...restProps} />
}

3. 替换原有AniLink即可

<CustomAniLink paintDrip hex="#24B2D8" to="/home">
  <Image src={logoImg} width="220px" alt="Logo" />
</CustomAniLink>

方案2：单独给当前Logo链接添加逻辑 #

如果不需要全局复用，直接修改现有代码即可：

import { useLocation } from "@reach/router"
import AniLink from "gatsby-plugin-transition-link/AniLink";

// 你的组件内部
const Header = () => {
  const currentPath = useLocation().pathname

  const handleLogoClick = (e) => {
    if (currentPath === '/home') {
      e.preventDefault()
      window.location.reload()
    }
  }

  return (
    <AniLink paintDrip hex="#24B2D8" to="/home" onClick={handleLogoClick}>
      <Image src={logoImg} width="220px" alt="Logo" />
    </AniLink>
  )
}

优化提示：如果只是需要点击Logo回到页面顶部、重置页面筛选/滚动状态，不需要全页刷新，可以将window.location.reload()替换为对应的业务逻辑，比如window.scrollTo(0, 0)，能获得更好的性能体验。

内容的提问来源于stack exchange，提问作者yangcodes