如何在Next.js中实现滚动时更新浏览器历史记录？

• 核心目标：页面滚动时，当指定元素进入视图范围，自动将浏览器URL更新为对应锚点，并添加新的历史记录条目（注意：不是点击链接触发滚动，也不是恢复滚动位置）
• 示例页面结构：

<h1 id="one">
  <a href="#one">Link one</a>
</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis feugiat vivamus at augue eget arcu dictum. Pulvinar neque laoreet suspendisse interdum. Odio euismod lacinia at quis. Laoreet suspendisse interdum consectetur libero id faucibus nisl. 

<h1 id="two">
  <a href="#two">Link two</a>
</h1>

Lacus sed viverra tellus in hac habitasse platea. Aliquam etiam erat velit scelerisque in dictum non. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. At imperdiet dui accumsan sit amet. 

• 已知背景：熟悉history.pushState()和Intersection Observer API，但对React/Next.js使用较少，了解Next.js新旧路由的useRouter导入差异。

采用Next.js原生方式，实现元素进入视图时自动更新浏览器URL的方法是什么？

1. App Router（新版，使用next/navigation） #

结合useRouter的push方法与Intersection Observer，实现滚动时的URL锚点更新：

'use client';

import { useEffect, useRef } from 'react';
import { useRouter } from 'next/navigation';

export default function ScrollAnchorPage() {
  const router = useRouter();
  const observedElementsRef = useRef<Record<string, HTMLElement | null>>({});
  const lastActiveIdRef = useRef<string | null>(null);

  useEffect(() => {
    // 收集所有带id的目标元素（这里以h1为例，可按需调整选择器）
    const headings = document.querySelectorAll('h1[id]');
    
    headings.forEach(heading => {
      const id = heading.id;
      observedElementsRef.current[id] = heading;
    });

    // 配置Intersection Observer触发规则
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const id = entry.target.id;
            // 避免重复添加相同历史记录
            if (lastActiveIdRef.current !== id) {
              // 用Next.js路由API更新URL，禁用自动滚动避免跳转
              router.push(`#${id}`, { scroll: false });
              lastActiveIdRef.current = id;
            }
          }
        });
      },
      {
        root: null,
        rootMargin: '-20% 0px -70% 0px', // 调整触发阈值，元素进入视图上方20%时触发
        threshold: 0.1,
      }
    );

    // 开始监听目标元素
    headings.forEach(heading => observer.observe(heading));

    // 组件卸载时清理监听
    return () => {
      headings.forEach(heading => observer.unobserve(heading));
    };
  }, [router]);

  return (
    <div>
      <h1 id="one">
        <a href="#one">Link one</a>
      </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis feugiat vivamus at augue eget arcu dictum. Pulvinar neque laoreet suspendisse interdum. Odio euismod lacinia at quis. Laoreet suspendisse interdum consectetur libero id faucibus nisl.</p>
      
      <h1 id="two">
        <a href="#two">Link two</a>
      </h1>
      <p>Lacus sed viverra tellus in hac habitasse platea. Aliquam etiam erat velit scelerisque in dictum non. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. At imperdiet dui accumsan sit amet.</p>
    </div>
  );
}

2. Pages Router（旧版，使用next/router） #

逻辑与新版一致，仅useRouter的API细节有差异：

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

export default function ScrollAnchorPage() {
  const router = useRouter();
  const observedElementsRef = useRef<Record<string, HTMLElement | null>>({});
  const lastActiveIdRef = useRef<string | null>(null);

  useEffect(() => {
    const headings = document.querySelectorAll('h1[id]');
    
    headings.forEach(heading => {
      const id = heading.id;
      observedElementsRef.current[id] = heading;
    });

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const id = entry.target.id;
            if (lastActiveIdRef.current !== id) {
              // Pages Router的路由更新方式，禁用自动滚动
              router.push(`#${id}`, undefined, { scroll: false });
              lastActiveIdRef.current = id;
            }
          }
        });
      },
      {
        root: null,
        rootMargin: '-20% 0px -70% 0px',
        threshold: 0.1,
      }
    );

    headings.forEach(heading => observer.observe(heading));

    return () => {
      headings.forEach(heading => observer.unobserve(heading));
    };
  }, [router]);

  return (
    <div>
      <h1 id="one">
        <a href="#one">Link one</a>
      </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis feugiat vivamus at augue eget arcu dictum. Pulvinar neque laoreet suspendisse interdum. Odio euismod lacinia at quis. Laoreet suspendisse interdum consectetur libero id faucibus nisl.</p>
      
      <h1 id="two">
        <a href="#two">Link two</a>
      </h1>
      <p>Lacus sed viverra tellus in hac habitasse platea. Aliquam etiam erat velit scelerisque in dictum non. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. At imperdiet dui accumsan sit amet.</p>
    </div>
  );
}

关键注意事项 #

• 使用Next.js的router.push而非原生history.pushState，是为了保持客户端路由状态同步，避免路由不一致问题；
• 通过rootMargin和threshold可自定义触发时机，确保在元素进入视图的合适位置时更新URL；
• lastActiveIdRef用于避免重复添加相同的历史记录条目；
• App Router下组件需标记'use client'，因为涉及客户端DOM操作和交互；
• Next.js官方文档站点正是使用类似逻辑，结合Intersection Observer与路由API实现滚动时的URL锚点更新。

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