在Next.js网站上的浏览器后退按钮上保持上一页滚动位置

lhcgjxsq  于 2023-04-05  发布在  其他
关注(0)|答案(2)|浏览(239)

当我使用Next.js Link标签从A页导航到B页并单击浏览器后退按钮时,A页滚动到顶部。如何保留A页的滚动位置?
你可以在我的next.js博客上测试一下。滚动到this page的底部,点击一个文章链接,然后点击浏览器的后退按钮,它会滚动到顶部,而不是保留滚动位置。
源代码:https://github.com/GorvGoyl/Personal-Site-Gourav.io

taor4pac

taor4pac1#

通过将此标志添加到next.config.js来修复它

experimental: {
      scrollRestoration: true,
    },
kdfy810k

kdfy810k2#

您可以尝试实现分页并合并Link组件

import Link from 'next/link'
    
function PageLink({ pageNumber, currentPage }) {   
const isActive = pageNumber === currentPage   
const href = isActive ? null : `/blog?page=${pageNumber}`   

return (
        <Link href={href}>
          <a className={isActive ? 'active' : null}>{pageNumber}</a>
        </Link>   ) 
}

您还可以使用路由器定义总页数并返回特定的页码。

function Blog({ posts }) {
  const perPage = 10
  const totalPosts = posts.length
  const totalPages = Math.ceil(totalPosts / perPage)
  const router = useRouter()
  const currentPage = parseInt(router.query.page) || 1
  const startIndex = (currentPage - 1) * perPage
  const endIndex = startIndex + perPage
  const currentPosts = posts.slice(startIndex, endIndex)
  
  return (
    <div>
      {currentPosts.map(post => (
        // render each post
      ))}
      <div className="pagination">
        {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNumber => (
          <PageLink key={pageNumber} pageNumber={pageNumber} currentPage={currentPage} />
        ))}
      </div>
    </div>
  )
}

或者,您可以将“prerender”添加到 meta标记中,以缓存页面的内容,并且在用户返回页面时不会再次获取它。

<Head>
    <meta name="prerender-status-code" content="200" />
    <meta name="prerender" content="true" />
</Head>

相关问题