我明白你遇到的问题——在SSR场景下，即使用了useEffect，直接调用window.location.hash却返回'0'，这确实是Next.js服务端渲染和客户端路由同步时容易踩的坑。下面我会帮你分析问题根源，并给出几种可靠的实现方案：

问题根源分析 #

虽然useEffect是在客户端执行的，但如果你的组件在路由还未完全稳定时就尝试读取window.location.hash，或者没有正确利用Next.js的路由系统，就可能获取到错误的值（比如你遇到的'0'，大概率是路由初始化过程中的临时值或者错误处理的默认值）。另外，服务端本身没有window对象，任何在客户端之外访问window的操作都会引发问题，但你已经用了useEffect，所以主要问题还是路由同步的时机。

方案1：Pages Router（Next.js 12及更早）——用useRouter钩子 #

Next.js的useRouter提供了和路由状态同步的asPath属性，它包含完整的URL路径（包括哈希部分），比直接读取window.location更可靠：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function MyComponent() {
  const router = useRouter();

  useEffect(() => {
    // 从asPath中提取哈希部分（去掉#号）
    const hash = router.asPath.split('#')[1] || '';
    console.log('当前哈希值:', hash);
    
    // 这里写你的业务逻辑，比如滚动到对应锚点、初始化组件等
  }, [router.asPath]); // 依赖asPath，路由变化时自动触发

  return <div>你的组件内容</div>;
}

方案2：App Router（Next.js 13+）——用usePathname钩子 #

在App Router模式下，需要先标记组件为客户端组件（加'use client'指令），然后用usePathname获取完整路径：

'use client';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

export default function MyClientComponent() {
  const pathname = usePathname();

  useEffect(() => {
    const hashIndex = pathname.indexOf('#');
    const hash = hashIndex !== -1 ? pathname.slice(hashIndex + 1) : '';
    console.log('当前哈希值:', hash);
    
    // 执行你的业务逻辑
  }, [pathname]);

  return <div>你的组件内容</div>;
}

方案3：通用客户端监听——hashchange事件 #

如果需要监听哈希值的动态变化（比如用户手动修改URL哈希、页面内锚点跳转），直接监听浏览器的hashchange事件会更全面：

import { useEffect } from 'react';

// Pages Router或App Router的客户端组件都能用
function MyComponent() {
  useEffect(() => {
    const handleHashChange = () => {
      // 去掉哈希前面的#号，得到纯净的哈希值
      const hash = window.location.hash.slice(1);
      console.log('哈希值变化:', hash);
      
      // 处理你的逻辑
    };

    // 组件挂载时先执行一次，获取初始哈希
    handleHashChange();
    // 监听哈希变化事件
    window.addEventListener('hashchange', handleHashChange);

    // 组件卸载时清理事件监听
    return () => {
      window.removeEventListener('hashchange', handleHashChange);
    };
  }, []);

  return <div>你的组件内容</div>;
}

最佳实践总结 #

• 优先使用Next.js官方提供的路由钩子（useRouter/usePathname），它们能和Next.js的路由系统完美同步，避免原生window的异步问题；
• 如果需要监听哈希的动态变化，结合hashchange事件能覆盖所有场景（包括用户手动修改URL）；
• 确保代码只在客户端执行：App Router下必须加'use client'，Pages Router下useEffect本身就是客户端执行的，无需额外标记。

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