按下后退按钮时的 Next.js 行为

Question

我正在尝试修复一个页面，以便在用户按下返回按钮（浏览器）时保持滚动位置。假设我有一个名为 list 的组件，我在其中向用户展示了一些产品。要查看所有产品，用户可以向下滚动列表组件。当用户单击某个产品时，应用程序会将用户重定向到详细信息组件。然后，当用户尝试返回列表时，点击浏览器的后退按钮，列表组件被渲染，并且似乎自动滚动到顶部。

据我所知，按下浏览器的后退按钮会触发window.history.back() 操作，没有其他反应。

对于一个解决方案，我在我的应用程序的上下文中实现了一个变量，它保存了 scrollY 值，然后在我尝试渲染的组件（列表组件）的componentWillMount（或useEffect）中，我将滚动位置设置为上下文中设置的值。

我的解决方案的详细信息在这里，因为我的整个代码都基于这个堆栈溢出的帖子： How to change scroll behavior while going back in next js?

我已经使用一些日志检查了该值，并且滚动位置已正确保存在上下文中，但是，由于我使用的是窗口事件侦听器，它会在列表组件被呈现后将值设置为零。

在我的代码中，我没有使用任何类型的滚动配置，所以我想知道这种行为是否是 Next.js 或 react 的某种默认行为。当用户点击浏览器的后退按钮时会发生这种情况，但我是 next 的新手，我不知道我是否遗漏了什么或什么，我什至不知道这个问题是否与 React 或Next.js 本身。

Answer 1

查看您的网址，使用浅层路由可以解决问题。 URL 将在何处更新。并且页面不会被替换，只会更改路由的状态。所以你可以据此改变你的逻辑。

官方文档中有一个很好的例子： https://nextjs.org/docs/routing/shallow-routing

您可以使用 display: 'hidden' 根据您的状态有条件地隐藏和显示您的组件！

这是一种解决方法，但根据您的具体情况，它可能会更有用！

Answer 2

在寻找不使用window.scroll等类似方法的其他解决方案后，我找到了解决方案。

第一个解决方案（有效，但对我来说，我有一个通过 API 调用加载的无限列表，有时 window.scroll 方法不准确）：我获取 window.scrollY 值并将其设置在会话存储中，我在离开列表页面之前这样做了，所以在详细信息页面中，如果用户点击后退按钮，在页面加载的那一刻，我从会话存储中获取 Y 值并使用 window.scroll 方法强制页面滚动到先前配置的值。 正如我之前提到的，这有效，但在我的情况下，我有一个从异步 API 调用填充的列表，所以有时加载的页面没有所有图像并且已经配置滚动，然后加载图像和数据并用户最终看到了页面中的其他位置，而不是期望的位置。

第二个解决方案：在我的例子中，我们谈论的是一个电子商务应用程序，所以我发现这个解决方案很有用，因为它专注于具有相应 ID 的特定项目，而不是窗口的 Y 坐标。 Scroll Restoration in e commerce app