NextJS Link组件无法处理带哈希ID的链接问题求助

1. 用对象格式传递href参数 #

Next.js的Link组件对哈希的解析更友好的方式是拆分路径和哈希，改成对象形式传递：

<Link href={{ pathname: '/', hash: '#kontakt' }} className={styles.anchor} aria-label="Kontakt">
    Kontakt
</Link>

这种写法能让Next.js正确识别哈希部分，避免字符串拼接可能导致的解析问题。

2. 确认目标元素id完全匹配 #

检查页面中需要跳转到的元素，确保它的id是kontakt（注意大小写、无空格/特殊字符），比如：

<div id="kontakt">
  <!-- 目标内容 -->
</div>

哈希值必须和元素id完全一致，否则无法定位到目标位置。

3. 不要禁用默认滚动行为 #

如果之前设置了scroll={false}，请移除这个属性——默认情况下Next.js会自动处理哈希跳转的滚动逻辑，强制关闭会导致跳转后不滚动到目标位置。

如果需要自定义滚动效果，可以手动监听路由完成事件后执行滚动：

import { useRouter } from 'next/router';

const ContactLink = () => {
  const router = useRouter();

  const handleNavigate = () => {
    router.push({ pathname: '/', hash: '#kontakt' }).then(() => {
      const target = document.getElementById('kontakt');
      target?.scrollIntoView({ behavior: 'smooth' });
    });
  };

  return (
    <a onClick={handleNavigate} className={styles.anchor} aria-label="Kontakt">
      Kontakt
    </a>
  );
};

4. 处理静态页面的Hydration问题 #

如果页面是静态生成（SSG）或增量静态再生（ISR），可能在客户端Hydration完成前无法找到目标元素。可以通过监听路由事件来解决：

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

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

  useEffect(() => {
    const scrollToHash = () => {
      const hash = router.asPath.split('#')[1];
      if (hash) {
        const target = document.getElementById(hash);
        target?.scrollIntoView();
      }
    };

    router.events.on('routeChangeComplete', scrollToHash);
    // 组件卸载时移除监听
    return () => router.events.off('routeChangeComplete', scrollToHash);
  }, [router]);

  return (
    <div>
      {/* 页面其他内容 */}
      <div id="kontakt">联系我们</div>
    </div>
  );
}

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