Next.js

Question

我通过从 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 },
    });
};

Answer 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

Answer 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 是最好的解决方案。

Answer 3

如果您想直接将 router.push 与包含查询值的给定目标路径一起使用，

并防止滚动到顶部，您还可以使用：

router.push(`/?page=2`, undefined, { scroll: false });

这只是示例，请根据您的情况/要求进行更改。

希望对你有帮助

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

Next.js - router.push without scrolling to the top

javascript

reactjs

routes

next-router