Next.js手动修改URL哈希无法定位区块？求无useRouter方案及原因

问题原因 #

直接输入带哈希的URL（如www.example.com#section）时滚动失效，但从当前页手动添加哈希却正常，核心原因和Next.js的页面渲染时序有关：

• 直接输入URL时，浏览器会在页面初始加载阶段尝试自动滚动到哈希对应的元素，但如果目标元素是客户端hydration完成后才渲染的（比如依赖异步数据、客户端组件、或动态生成的DOM），初始返回的SSR/SSG静态HTML中不存在该元素，浏览器找不到目标，滚动逻辑自然失效。
• 从当前页添加哈希时，页面已完成hydration，DOM元素完全加载，浏览器能准确定位到目标区块，因此滚动正常。
• 偶发现象多是因为目标元素的渲染时机不稳定：比如某些场景下SSR返回的HTML包含该元素，浏览器能直接定位；另一些场景下元素仅在客户端渲染，就会出现失效情况。

无useRouter的解决方案 #

方案1：页面级 useEffect 处理（函数组件） #

在目标页面中通过useEffect监听页面加载完成后，手动检查哈希并触发滚动：

import { useEffect } from 'react';

function TargetPage() {
  useEffect(() => {
    const scrollToHash = () => {
      const hash = window.location.hash.slice(1);
      if (!hash) return;
      
      const targetElement = document.getElementById(hash);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };

    // 初始加载时执行
    scrollToHash();
    // 监听哈希变化（用户手动修改URL哈希时触发）
    window.addEventListener('hashchange', scrollToHash);

    return () => window.removeEventListener('hashchange', scrollToHash);
  }, []);

  return (
    <div>
      {/* 页面内容 */}
      <div id="section">需要定位的区块</div>
    </div>
  );
}

export default TargetPage;

方案2：全局 _document.js 处理（多页面通用） #

如果多个页面需要哈希定位逻辑，可以在pages/_document.js中全局添加处理：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  componentDidMount() {
    const scrollToHash = () => {
      const hash = window.location.hash.slice(1);
      if (!hash) return;
      
      const targetElement = document.getElementById(hash);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };

    scrollToHash();
    window.addEventListener('hashchange', scrollToHash);
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

方案3：原生HTML脚本处理（极简） #

在public/index.html的body末尾添加原生脚本，在页面完全加载后处理哈希：

<script>
  window.addEventListener('load', () => {
    const hash = window.location.hash.slice(1);
    if (hash) {
      const element = document.getElementById(hash);
      element?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
</script>

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