Next.js跨页面锚点跳转至指定div失效，如何解决？

针对你遇到的从页面A跳转到页面B指定id的div失效问题，结合Next.js的SSR特性，分两种路由场景给出解决方法：

一、Next.js 13+ App Router 场景 #

1. 页面B（目标页）的处理 #

在目标页（如app/about/page.js）顶部添加'use client'，通过useRef绑定目标div，并在组件挂载后执行滚动逻辑：

'use client';

import { useEffect, useRef } from 'react';

export default function AboutPage() {
  // 绑定目标div的ref
  const targetRef = useRef(null);

  useEffect(() => {
    // 获取URL中的哈希值（去掉#）
    const hash = window.location.hash.slice(1);
    // 匹配目标id且ref存在时执行滚动
    if (hash === 'about' && targetRef.current) {
      targetRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, []);

  return (
    <div className="page-content">
      {/* 页面其他内容 */}
      <div id="about" ref={targetRef} className="target-section">
        这是你要跳转的目标区域
      </div>
    </div>
  );
}

2. 页面A（跳转页）的Link配置 #

禁用Next.js默认的滚动行为，避免和手动滚动冲突：

import Link from 'next/link';

// 在页面A的组件中
<Link href="/about#about" scroll={false}>
  跳转到About页面的指定区域
</Link>

二、Next.js 12及以下 Pages Router 场景 #

1. 页面B（目标页）的处理 #

在目标页（如pages/about.js）中，通过useEffect在客户端挂载完成后查找目标元素并滚动：

import { useEffect } from 'react';

export default function About() {
  useEffect(() => {
    const hash = window.location.hash;
    if (hash) {
      const targetElement = document.querySelector(hash);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, []);

  return (
    <div>
      {/* 页面其他内容 */}
      <div id="about">这是目标区域</div>
    </div>
  );
}

2. 页面A（跳转页）的Link配置 #

直接使用带哈希的路径即可：

import Link from 'next/link';

<Link href="/about#about">
  <a>跳转到About页面的指定区域</a>
</Link>

关键注意事项 #

• 目标id准确性：确保哈希值（#后的内容）和目标div的id完全一致，无空格或特殊字符。
• 懒加载组件适配：如果目标div在懒加载组件内，需在懒加载组件挂载完成后再执行滚动逻辑（可通过监听组件状态变化实现）。
• 优先使用useRef：相比getElementById，useRef能更可靠地获取客户端组件中的DOM元素，避免hydration阶段的DOM未就绪问题。

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