Next.js 在页面路由时保持滚动位置 [英] Next.js maintain scroll position when page Routing

问题描述

我目前正在 Next.js 样板上创建一个网站.

我的路由代码是这样的.(下)

从'next/link'导入链接<Link href={{ pathname: '/some-url', query: { param: something } }}>
<button type="button" onClick={handleClickMore}><span>+更多</span></button></div></链接>

当我单击此 <Button> 时，我不想移动滚动位置.但如您所知，当新页面被路由时，它会移动到顶部.有没有人知道在加载新页面时保持滚动位置.

解决方案

<Link scroll={false} href="/"><a>首页</a></Link>

scroll={false} 将禁用滚动到该特定链接的页面更改顶部.

参考:https://github.com/zeit/next.js/issues/3950

I am currently making a web site on Next.js boilerplate.

My routing code is this. (below)

import Link from 'next/link'


<Link href={{ pathname: '/some-url', query: { param: something } }}>
  <div>
    <button type="button" onClick={handleClickMore}><span>+ More</span></button>
  </div>
</Link>

when I click this <Button> I do not want scroll position to be moved. But as you know, it moves to the top when the new page is being routed. Does anyone have any idea about maintaining scroll position when the new paged is being loaded.

解决方案

<Link scroll={false} href="/"><a>Home</a></Link>

scroll={false} will disable the scroll to top on page changes for that specific link.

Reference: https://github.com/zeit/next.js/issues/3950

这篇关于Next.js 在页面路由时保持滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！