如何滚动更新next.js中的历史记录？

Question

快速说明：这个问题并不是在单击链接时寻求滚动，也不是在单击链接时寻求恢复滚动位置，而是在页面滚动时向浏览器状态添加新项目

我正在开发一个代码库，我希望当有人滚动时将历史记录更新到新的锚点，例如：

<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. 

我对 JS 本身非常熟悉，所以

history.pushState()

和交叉口观察者对我来说很熟悉，但我不再经常使用 React 或 Next。

import Link from "next/link";
import { useRouter } from "next/router";

我还看到有更新的

import { useRouter } from 'next/navigation'

周围似乎取代了旧路由器。

当项目出现在视图中时，使浏览器的 URL 更新的“NextJS 方式”是什么？

我有链接组件的下一个文档似乎没有涵盖这一点（只有单击链接时滚动的不相关概念）。然而，链接组件的下一个文档本身使用了这种技术 - 滚动页面并观察 URL 更新 - 这似乎表明原生 Next.js 解决方案已经存在。

Answer 1

Next.js中滚动恢复的当前状态还有很多不足之处。

Next.js

中所有现有的滚动恢复解决方案都很棘手，并且不遵循真实的网站行为。 如果您正在使用 app directory，请尝试一下

next-scroll-restorer

软件包。它依赖于History API，因此浏览器决定锚点是否是新的历史状态。 next-scroll-restorer 尝试为单页应用程序重现 html 网站的旧式简单行为。