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

2023-12-27

我正在通过导入使用下一个路由器useRouter from next/router.

我正在尝试找到一种解决方案,当我更改 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 },
    });
};

router.push has a 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选项对象中的 props。您可以在这里检查它们:https://nextjs.org/docs/api-reference/next/link https://nextjs.org/docs/api-reference/next/link

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Next.js - router.push 无需滚动到顶部 的相关文章

随机推荐

  • 单击 URL 将打开默认浏览器

    我已经在我的中加载了一个外部URLWebView 现在我需要的是 当用户单击加载的页面上的链接时 它必须像普通浏览器一样工作并在相同的位置打开链接WebView 但它打开默认浏览器并加载页面 我已经启用了 JavaScript 但它仍然不起
  • 带有 android:autoVerify="true" 的意图过滤器 - 安装时从未验证,默认应用程序链接不起作用

    我在 Android 应用程序中使用branch io SDK 并希望使我的应用程序成为 Android 6 上分支链接的默认处理程序 如下所述here http developer android com training app lin
  • Java 库类的源代码

    在哪里可以找到 Java 库类的源代码 我的意思是课程rt jar 平台 Windows 对于具有单独 JRE 和 JDK 下载的旧版本 Java 请下载 JDK 公共类的源代码位于 src zip 中
  • 计算列中值的频率[重复]

    这个问题在这里已经有答案了 我有不同项目的数据 这些项目的路径 A E 和可能性 不太可能 可能 或 可能 数据如下所示 但有更多项目 因此有更多行 Project Pathway Likelihood 1 Red A unlikely 2
  • 使用 Ghostscript 将 PDF 转换为 PostScript:大文件打印时出现问题

    我目前正在使用 Ghostscript 将 500 页 PDF 文件转换为 PostScript 我使用的是 Windows 7 Ghostscript x64 v 9 16 和柯达 Digimaster 商业打印机 我使用 GhostSc
  • Firestore 复合查询 <= & >=

    我需要查询 firestore 集合中开始时间 是一个数字 为的条目 gt slot start和和 lt slot end 像这样 collection Entries ref gt ref where timeStart gt slot
  • 无法模拟 API 请求

    设置起来非常困难开玩笑测试模拟 https github com jefflau jest fetch mock在我的 TypeScript 项目中 我想知道是否有人可以指出我正确的方向 我有一个看起来像这样的函数 检索数据 ts impo
  • postgresql:如何获取通过批量 copy_from 插入的行的主键?

    目标是这样的 我有一组值要放入表中A 以及一组要放入表中的值B 进入的值B参考值在A 通过外键 所以插入后A值我需要知道如何在插入时引用它们B价值观 我需要这个尽可能快 我做了B通过批量复制插入值 def bulk insert copyf
  • Java简单网络IP地址扫描器[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想制作自己的 ip 扫描器 扫描本地网络上的可用 ip 就像 Angry IP Scanner 那样 我还想获取一些基本的设备信息
  • Rails 中同一个类的多个关联的最佳实践?

    我认为我的问题最好作为一个例子来描述 假设我有一个名为 Thing 的简单模型 它有一些简单数据类型的属性 就像是 Thing foo string goo string bar int 这并不难 db 表将包含具有这三个属性的三列 我可以
  • 如何用 PHP 计算 AWS 签名?

    我正在 bref 中编写一个 webhook 并希望它向 SQS 发送消息 为此使用整个 AWS SDK 是一种巨大的浪费 我如何计算签名 const AWS DATETIME FORMAT Ymd THis Z url getenv SQ
  • 如何查看php的执行时间? [复制]

    这个问题在这里已经有答案了 我的网站中有大量 PHP 代码 我想知道执行时间处理时间的处理 我怎样才能做到这一点 您可以使用microtime as the start and end你的 PHP 代码
  • Spark 结构化流 ForeachWriter 和数据库性能

    我已经尝试过像这样实现结构化流 myDataSet map r gt StatementWrapper Transform r writeStream foreach MyWrapper myWriter start awaitTermin
  • 如何在 ASP.NET Core 中将备用文件夹配置为 wwwroot?

    是否可以配置不同的文件夹来替换wwwroot在 ASP NET Core 中 如果是的话 怎么办 这种改变有副作用吗 目前唯一包含的配置wwwroot在整个项目中发现project json如下面的代码所示 但用新文件夹的名称替换该值对于静
  • 高阶函数,如何在不铸造的情况下从模型中推导出注入类型

    我有点坚持这个非常简单的想法 想象一下 我们有一个简单的高阶函数 它接受另一个函数和某个对象并返回另一个函数 const hof callback data gt model gt callback data model 现在我想做的是 类
  • 如何在 iOS 7 和 iOS 8 中锁定设备方向

    我的应用程序有问题 我无法锁定应用程序的方向 我需要做的就是将一个视图控制器锁定为横向模式 其余的为纵向模式 这是我的应用程序的层次结构 Navigation Controller TabBarController ViewControll
  • 更新函数内的全局 js 变量并将更新后的内容发送到 HTML 文档

    我在更新全局变量并将更新后的内容发送到 HTML 时遇到了很大的困难 我在 HTML 中有以下内容 We found places for you 在 JavaScript 中 var mainCount 3 Global variable
  • 如何在 PyMuPDF 中获取文本的背景颜色

    我试图看看是否可以使用文本的背景和前景色识别 PDF 内表格中可能的表格标题 通过 PyMuPDF 文本提取 我能够获得前景色 想知道是否有办法也获得背景颜色 我使用 pymupdf 1 16 2 和 python 3 7 我已检查过文档
  • NSPointerArray 奇怪的压缩

    我有一个弱者NSPointerArray和一些NSObject已被释放 致电之前compact我看到的是 lldb po currentArray count 1 lldb po currentArray pointerAtIndex 0
  • Next.js - router.push 无需滚动到顶部

    我正在通过导入使用下一个路由器useRouter from next router 我正在尝试找到一种解决方案 当我更改 URL 的查询时 该解决方案不会滚动到页面顶部 有什么解决办法吗 我知道 Next 的 Link 组件有这个选项 但我