在 Next js / React 中保存和恢复窗口 y 位置答案

【问题标题】：Save and restore window y position in Next js / React在 Next js / React 中保存和恢复窗口 y 位置
【发布时间】：2021-04-27 12:02:59
【问题描述】：

我正在使用 nextjs Link 与浅和替换属性来将 url 从/author 更改为/author?book=234523452 当检测到查询页面有条件地隐藏 InfiniteScroll 组件并显示一个组件改为预订。单书组件有一个“X”可以返回（也包含在链接中），以便再次显示 InfiniteScrollComponent。

我要做的是在查询（单本书）时保存当前窗口 Y，并在单击“X”时通过 useState 移动到该存储位置。

我想提一下，很遗憾 scroll={false} 不适用于我的情况。

这是我的页面相关代码：

const [scrollPos, setScrollPos] = useState()

const readUrl = (url, bool) => {
  if (url){
    setScrollPos(window.pageYOffset || document.documentElement.scrollTop)
    setUrlNow(url)
  }else{
    router.events.on('routeChangeComplete', () => {
      if (typeof window !== "undefined") {
        //setTimeout(function(){
          window.scrollTo(0,scrollPos)
        //},200)
      }
    })
  }
  setToggle(bool)
  
  return
}

if (url) 表示它从/author（因此使用InfiniteScroll 组件）路由到/author?book=234523452（使用单本书），else 表示“X”基本上被点击了，因此路由回/author

setTimeout(function() 似乎在大多数情况下都有效，但并非总是如此，并且还为其添加了丑陋的移动效果

【问题讨论】：

标签： javascript reactjs scroll react-router next.js

【解决方案1】：

您可以设置scrollPos为到达retainedComponent，有详细指导here

【讨论】：

我实际上犯了一个错误，没有指出第一页是 /author/[id] ，它是动态的，它是在构建时通过 getStaticPaths 创建的，它会生成大约 300 个不同的 [id]。你建议的方法还能用吗？
我在我的网站上使用了这个教程，效果很好。