React应用锚点跳转未定位到目标区块而是回到上次滚动位置如何解决？

• 单页应用客户端路由特性导致：React路由走的是客户端跳转，不会触发浏览器原生页面重载，浏览器默认的锚点定位逻辑不会自动执行。
• 自定义逻辑执行时机与DOM渲染不同步：你之前写的监听hash的useEffect依赖项为空，仅会在组件首次挂载时执行；且跳转回A页面时，hash会先被注入到地址栏，此时目标id对应的DOM节点还没完成渲染，document.querySelector直接返回null，滚动逻辑完全失效。
• 浏览器滚动恢复优先级高于自定义逻辑：你在页面组件内设置scrollRestoration = 'manual'的时机太晚，浏览器已经提前读取了历史滚动记录、恢复到了上一次A页面的滚动位置，覆盖了你的滚动操作。
• 依赖项缺失：监听hash的逻辑没有将hash值作为依赖项，hash变化时不会重新触发执行。

1. 全局设置滚动恢复 #

在应用根组件的最外层设置滚动恢复，确保在路由初始化前就生效，避免浏览器优先触发滚动恢复：

// 根组件App.jsx
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    if ('scrollRestoration' in history) {
      history.scrollRestoration = 'manual';
    }
  }, []);

  // 其余根组件逻辑
}

2. 优化锚点滚动逻辑 #

在首页A组件中调整useEffect逻辑，增加依赖项、DOM就绪判断和重试机制，确保目标节点存在后再执行滚动：

// 首页A组件代码
import { useEffect } from 'react';

export default function PageA() {
  useEffect(() => {
    const scrollToAnchor = () => {
      const hash = window.location.hash;
      if (!hash) return;

      // 增加重试逻辑，最多重试3次，每次间隔100ms，等待DOM渲染完成
      const tryScroll = (retryCount = 3) => {
        const targetNode = document.querySelector(hash);
        if (targetNode) {
          targetNode.scrollIntoView({ block: 'start' });
          return;
        }
        if (retryCount > 0) {
          setTimeout(() => tryScroll(retryCount - 1), 100);
        }
      };
      tryScroll();
    };

    // 组件挂载时执行
    scrollToAnchor();
    // 监听hash变化，覆盖同页面内锚点跳转场景
    window.addEventListener('hashchange', scrollToAnchor);
    return () => window.removeEventListener('hashchange', scrollToAnchor);
  }, [window.location.hash]); // hash变化时重新触发逻辑

  // 其余页面A逻辑
}

3. 替换原生a标签为路由组件跳转（可选） #

如果使用React Router，建议用内置的Link组件替代原生a标签，符合SPA路由规范，避免异常跳转：

// 页面B代码
import { Link } from 'react-router-dom';

<Link to="/#foo">Go to foo</Link>

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