咨询：react-scrollable-anchor中removeHash()的正确放置位置

别担心，基础问题太正常了！我来帮你搞定这个removeHash()的正确放置位置~

你现在遇到的核心问题是：removeHash()只在页面刷新时执行，但你需要它在每次锚点跳转完成后自动触发，而不是等刷新。之前放在index.js里没用，是因为index.js里的代码只会在页面初始化时跑一次，点击锚点跳转的时候根本不会重新执行它。

下面给你两种最靠谱的解决方案，根据你的跳转方式选就行：

方案1：用scrollToAnchor的Promise回调（推荐） #

react-scrollable-anchor的scrollToAnchor方法会返回一个Promise，当锚点滚动完成时这个Promise会resolve。我们刚好可以利用这个时机调用removeHash()，完美匹配你的需求。

比如你有一个导航按钮组件：

import { scrollToAnchor, removeHash } from 'react-scrollable-anchor';

const NavButton = ({ anchorId, buttonText }) => {
  const handleAnchorClick = () => {
    // 先执行锚点滚动
    scrollToAnchor(anchorId)
      .then(() => {
        // 滚动完成后立刻移除URL哈希
        removeHash();
      });
  };

  return <button onClick={handleAnchorClick}>{buttonText}</button>;
};

方案2：处理原生a标签跳转 #

如果你用的是原生<a>标签做锚点链接，记得要先阻止浏览器的默认跳转行为，再手动执行滚动和哈希移除，不然浏览器会直接修改URL哈希，可能和我们的操作冲突：

import { scrollToAnchor, removeHash } from 'react-scrollable-anchor';

const AnchorLink = ({ anchorId, children }) => {
  const handleLinkClick = (e) => {
    // 阻止浏览器默认的锚点跳转动作
    e.preventDefault();
    // 执行滚动并在完成后移除哈希
    scrollToAnchor(anchorId)
      .then(() => removeHash());
  };

  return <a href={`#${anchorId}`} onClick={handleLinkClick}>{children}</a>;
};

关键原理 #

之前你把removeHash()放在index.js里，它只会在页面首次加载/刷新时执行一次，完全捕捉不到后续的锚点点击事件。而上面的方案是把它绑定到每一次锚点跳转的完成事件上，这样每次点击锚链接后，滚动完成就会自动移除URL里的哈希，不用再刷新页面啦。

内容的提问来源于stack exchange，提问作者Mix Master Mike