React中点击同页面链接时如何刷新当前页面？

React Router的Link组件默认不会在当前路径与目标路径相同时触发页面更新，这就是你点击页脚首页图标却停留在底部的原因——ScrollToTop组件的useEffect依赖pathname变化，而同页面点击不会改变pathname，所以不会执行滚动逻辑。

下面提供两种实用解决方案：

方案1：自定义Link组件（推荐） #

创建一个自定义Link组件，判断当前路径是否与目标路径一致，若一致则手动触发滚动到顶部，还可按需触发页面组件的重新加载：

import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom';

const CustomLink = ({ to, children, ...props }) => {
  const location = useLocation();
  const navigate = useNavigate();

  const handleClick = (e) => {
    if (location.pathname === to) {
      e.preventDefault();
      // 平滑滚动到顶部
      window.scrollTo({ top: 0, behavior: 'smooth' });
      // 触发路由重新加载当前页面（仅客户端刷新，不会重载整个浏览器）
      navigate(0);
    }
  };

  return (
    <RouterLink to={to} {...props} onClick={handleClick}>
      {children}
    </RouterLink>
  );
};

export default CustomLink;

使用方式 #

在你的Footer组件中替换原Link为自定义的CustomLink即可：

import CustomLink from './CustomLink';

function Footer() {
  return (
    <footer>
      <CustomLink to="/">首页图标</CustomLink>
    </footer>
  );
}

这个方案既解决了滚动问题，navigate(0)还会让当前页面组件重新挂载，若首页有需要刷新的数据（比如从接口获取内容），相关的初始化逻辑会重新执行。

方案2：直接使用锚点标签（简单暴力） #

如果不需要保留客户端路由的特性，可直接用原生<a>标签，点击时强制刷新整个页面：

function Footer() {
  return (
    <footer>
      <a 
        href="/" 
        onClick={(e) => {
          if (window.location.pathname === '/') {
            e.preventDefault();
            window.location.reload();
          }
        }}
      >
        首页图标
      </a>
    </footer>
  );
}

这种方式会触发全页面刷新，适合对性能要求不高或需要完全重置页面状态的场景。

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