Next.js - router.push 不滚动到顶部答案

【问题标题】：Next.js - router.push without scrolling to the topNext.js - router.push 不滚动到顶部
【发布时间】：2021-04-30 07:33:14
【问题描述】：

我通过从next/router 导入useRouter 来使用路由器。

我正在尝试找到一个解决方案，当我更改 URL 的查询时，它不会滚动到页面顶部。有什么解决办法吗？我知道 Next 中的 Link 组件具有该选项，但我需要使用 Router 组件。我的下一个版本是 10.0.5。

const router = useRouter();

const changeCurrency = (newCurrency) => {
   //Do some stuff here

    Router.push({
        pathname: router.pathname,
        query: { ...router.query, currency: newCurrency.value },
    });
};

【问题讨论】：

我能想到的一件事是监听 routeChangeStart 事件并在那里保留窗口位置，然后在 routeChangeComplete 触发时滚动到它。 nextjs.org/docs/api-reference/next/router#routerevents
@Gh05d 是的，我正在考虑这个问题，但不确定如何保留窗口位置。
您可以将其保存到 routeChangeStart 事件触发时的状态。

标签： javascript reactjs routes next.js next-router

【解决方案1】：

router.push 有一个scroll 选项，默认为true。你可以这样关闭它：

const router = useRouter();

async function navigate(newCurrency) {
  router.push({
    pathname: router.pathname,
    query: { ...router.query, currency: newCurrency.value },
  }, undefined, { scroll: false });
}

router.push 在选项对象中接受大部分（如果不是全部）next/link 的道具。你可以在这里查看它们：https://nextjs.org/docs/api-reference/next/link

【讨论】：

【解决方案2】：

我的一个奇怪的解决方法。只需在视图中获取特定组件。方法如下。

import React, { useEffect, useRef } from 'react';


function MyAccount() {
  const containerRef = useRef(null);

  useEffect(() => {
    setTimeout(() => {
      containerRef.current.scrollIntoView({ behavior: 'smooth' });
    }, 250);
  }, []);

  return (
    <div ref={containerRef}>
   {/* It will be your particular component that needs to be shown  */}
        <UserInformation /> 
    </div>
  );
}

export default MyAccount;

有些人可能会觉得它很有用！这就是为什么我在这里发布这个。如果您想保留视图，scroll=false 是最好的解决方案。

【讨论】：

为焦点管理添加超时通常是一种不好的做法，因为它可能会在不同的情况下中断。例如，在较慢的网络上或如果主线程很忙，您的组件可能需要超过 250 毫秒的时间才能挂载，并且那里的逻辑将无法正常工作。
是的，这是真的。这是一个权衡。在这种特定情况下，有没有更好的选择而不会导致性能损失？接受的答案在某些情况下不起作用。我在生产中遇到过。当我写那个答案时，这是一个已知问题。这是我的解决方法。提前谢谢你。
感谢您提供的信息。您知道接受的解决方案在哪些情况下不适合您吗？想知道是否有一些组件卸载导致容器高度变为 0，从而导致滚动到顶部行为。如果不知道详细信息就无法发表评论，但如果 NextJS 问题已登录到他们的仓库，请随意标记。
问题已解决，但在某些移动浏览器中仍然存在问题。实际上，我在那个问题上也给出了这个答案。我只是复制到这里。我使用 react-device-detect 来呈现我的网站。对于移动浏览器，我使用这个，对于桌面浏览器，我使用正常的方式。由于前端非常轻量级，因此发生这种情况的可能性非常低。此外，这不是关键任务逻辑。如果逻辑不被尊重，我没有问题。希望它很快会在未来的版本中得到修复。