Next.js中能否实现跨页面指定区块的链接跳转？

Next.js完全支持跳转到其他页面的指定区块，逻辑和纯HTML锚点跳转类似，但不同路由模式（Pages Router/App Router）有细节差异，具体实现如下：

一、Pages Router（Next.js 12及更早版本） #

直接使用Next.js内置的<Link>组件，在href中拼接目标页面路径和锚点ID即可：

跳转组件示例 #

import Link from 'next/link';

export default function HomePage() {
  return (
    <nav>
      <Link href="/about#contact-block">跳转到关于页的联系区块</Link>
    </nav>
  );
}

目标页面示例（pages/about.js） #

确保目标区块的id与锚点完全匹配（大小写敏感）：

export default function AboutPage() {
  return (
    <div>
      <h1>关于我们</h1>
      {/* 此处省略大量内容 */}
      <section id="contact-block">
        <h2>联系我们</h2>
        <p>邮箱：contact@example.com</p>
      </section>
    </div>
  );
}

二、App Router（Next.js 13+） #

App Router下同样支持锚点跳转，需注意<Link>组件需在客户端组件中使用（服务器组件无法渲染交互元素）：

客户端跳转组件示例（app/page.js） #

'use client';
import Link from 'next/link';

export default function HomePage() {
  return (
    <nav>
      <Link href="/about#contact-block">跳转到关于页的联系区块</Link>
    </nav>
  );
}

目标页面示例（app/about/page.js） #

目标区块的id要求与Pages Router一致：

export default function AboutPage() {
  return (
    <div>
      <h1>关于我们</h1>
      {/* 此处省略大量内容 */}
      <section id="contact-block">
        <h2>联系我们</h2>
        <p>邮箱：contact@example.com</p>
      </section>
    </div>
  );
}

锚点不生效的兼容处理 #

如果遇到动态内容导致锚点跳转失效的情况，可添加一个全局客户端组件处理滚动：

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

export function ScrollToAnchor() {
  const pathname = usePathname();
  const hash = pathname.split('#')[1];

  useEffect(() => {
    if (hash) {
      const targetElement = document.getElementById(hash);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [hash]);

  return null;
}

将该组件引入根布局（app/layout.js）即可全局生效。

关键注意事项 #

• 锚点ID与目标元素的id必须完全一致，区分大小写
• 跨页面跳转时，href需填写完整的页面路径+锚点，不能仅写/#section-id（仅当前页面跳转可用）
• 动态渲染的页面需确保目标元素已挂载完成再执行滚动操作

内容的提问来源于stack exchange，提问作者H.b