Next.js - router.push 无需滚动到顶部

JS

Next.JS 是一个流行的 React 框架，用于构建 SSR（服务器端渲染）和 SSG（静态生成）应用程序。在 Next.JS 中，我们可以使用内置的 useRouter 钩子来处理路由导航以及页面间的跳转。通常情况下，当我们通过 router.push 进行页面跳转时，页面会自动滚动到顶部。然而，有时候我们可能希望在进行页面跳转时保持当前滚动位置不变。本文将介绍如何在 Next.JS 中使用 router.push 进行无需滚动到顶部的页面跳转，并提供相应的案例代码。

使用 Next.JS 的 useRouter 钩子和 router.push 方法进行页面跳转非常简单。首先，我们需要导入 useRouter 钩子：

Javascript
import { useRouter } from 'next/router';

然后，在组件中使用 useRouter 钩子获取 router 对象：

Javascript
const router = useRouter();

接下来，我们可以使用 router.push 方法进行页面跳转。默认情况下，通过 router.push 进行页面跳转时，页面会滚动到顶部。然而，我们可以通过传递一个选项对象来控制页面跳转的行为。其中，scroll 参数用于指定是否滚动到顶部，将其设置为 false 可以实现无需滚动到顶部的页面跳转：

Javascript
router.push('/path/to/page', undefined, { scroll: false });

现在，页面将在进行跳转时保持当前滚动位置不变。

案例代码：

假设我们有一个带有按钮的组件，点击按钮后会跳转到另一个页面。我们希望在跳转时保持当前页面的滚动位置不变。以下是一个示例代码：

Javascript
import { useRouter } from 'next/router';
const ScrollPreservingButton = () => {
  const router = useRouter();
  const handleButtonClick = () => {
    router.push('/another-page', undefined, { scroll: false });
  };
  return (
    <button onClick={handleButtonClick}>跳转到另一个页面</button>
  );
};
export default ScrollPreservingButton;

在上面的示例代码中，我们定义了一个 ScrollPreservingButton 组件，当按钮被点击时，会通过 router.push 进行页面跳转，并设置 scroll 选项为 false，以保持当前滚动位置不变。

使用以上的方法，我们可以在 Next.JS 中实现页面跳转时无需滚动到顶部的效果。这对于需要在页面间进行快速导航或者保持用户当前浏览位置的应用程序非常有用。希望本文能对你理解和使用 Next.JS 中的页面跳转功能有所帮助。