React中HashLink与scroll-behavior冲突致滚动失效问题求助

冲突原因 #

同时启用HashLink的smooth属性和CSS全局scroll-behavior: smooth时，点击链接会触发两次平滑滚动操作：一次是HashLink自身的JS逻辑，另一次是浏览器原生的CSS滚动行为。两者互相干扰，导致滚动位置混乱，出现需多次点击才能生效的问题。

解决方案 #

方案1：保留HashLink的smooth，手动实现页脚跳转的平滑滚动 #

移除全局CSS的scroll-behavior配置，让HashLink负责导航栏的平滑滚动，页脚跳转通过自定义逻辑实现平滑滚动：

/* 移除全局scroll-behavior */
/* html { scroll-behavior: smooth; } */

页脚跳转组件示例：

import { useNavigate } from 'react-router-dom';

const FooterSmoothLink = ({ to, children }) => {
  const navigate = useNavigate();

  const handleClick = (e) => {
    e.preventDefault();
    // 先更新路由
    navigate(to);
    // 平滑滚动到目标元素
    const targetId = to.split('#')[1];
    if (targetId) {
      const targetEl = document.getElementById(targetId);
      targetEl?.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return <a href={to} onClick={handleClick}>{children}</a>;
};

方案2：保留全局scroll-behavior，禁用HashLink的smooth属性 #

去掉HashLink的smooth属性，让浏览器原生CSS处理所有哈希跳转的平滑滚动，同时监听路由哈希变化确保滚动生效：

// 修改HashLink，移除smooth属性
<HashLink to='/#id'>Id</HashLink>

添加路由哈希监听逻辑：

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

const App = () => {
  const location = useLocation();

  useEffect(() => {
    if (location.hash) {
      const targetId = location.hash.slice(1);
      const targetEl = document.getElementById(targetId);
      // 触发原生平滑滚动（依赖全局scroll-behavior配置）
      targetEl?.scrollIntoView({ behavior: 'smooth' });
    }
  }, [location.hash]);

  return (
    {/* 你的应用内容 */}
  );
};

方案3：临时禁用全局scroll-behavior适配HashLink #

通过CSS类切换，在HashLink点击时暂时禁用全局滚动行为，完成滚动后恢复：

html {
  scroll-behavior: smooth;
}

html.no-smooth {
  scroll-behavior: auto;
}

自定义HashLink组件：

import { HashLink } from 'react-router-hash-link';

const CustomHashLink = ({ to, children }) => {
  const handleClick = () => {
    document.documentElement.classList.add('no-smooth');
    // 滚动完成后恢复全局平滑滚动，可根据实际调整延迟时间
    setTimeout(() => {
      document.documentElement.classList.remove('no-smooth');
    }, 800);
  };

  return <HashLink smooth to={to} onClick={handleClick}>{children}</HashLink>;
};

内容的提问来源于stack exchange，提问作者MONIQUE PAULA SAVICZKI SANTANA