Next.js 13 Link组件无法在同页面滚动到指定区域求助

在Next.js 13的App Router中，Link组件默认的客户端导航行为和Pages Router存在差异，直接使用href='/#about'无法触发锚点滚动，以下是几种可行的解决方法：

方法一：显式启用scroll属性 #

在Link组件上添加scroll={true}属性，强制开启导航后的滚动行为：

// app/layout.tsx
<Link href='/#about' scroll={true}>About</Link>

这个属性会让Link组件在完成客户端导航后，自动滚动到指定锚点位置。

方法二：手动处理滚动事件 #

如果方法一不生效，可以通过onClick事件手动实现锚点滚动，绕过Link组件的默认行为：

// app/layout.tsx
<Link 
  href='/#about' 
  onClick={(e) => {
    e.preventDefault();
    const targetElement = document.getElementById('about');
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  }}
>
  About
</Link>

这种方式直接利用浏览器原生的scrollIntoView方法，确保滚动行为触发。

方法三：监听路由变化后滚动 #

如果页面是客户端组件，可以通过useRouter和useSearchParams钩子，在路由完成导航后执行滚动操作：

// app/page.tsx
'use client';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

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

  useEffect(() => {
    // 获取当前URL中的锚点
    const hash = window.location.hash;
    if (hash) {
      const targetId = hash.slice(1);
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [router, searchParams]);

  return (
    <section id='about'>About section</section>
  );
}

这种方式适用于需要更复杂逻辑的场景，比如动态生成的锚点或者需要自定义滚动行为的情况。

原生a标签能正常工作是因为它遵循浏览器默认的锚点导航行为，而Next.js的Link组件为了优化客户端导航，默认在同路由跳转时不会触发锚点滚动，需要通过上述方式显式配置。

内容的提问来源于stack exchange，提问作者A.Anvarbekov