如何在不使用 <Link> 的情况下动态更改 Next.js 应用程序中的 URL？答案

【问题标题】：How to dynamically change URL in a Next.js application without using <Link>?如何在不使用 <Link> 的情况下动态更改 Next.js 应用程序中的 URL？
【发布时间】：2021-12-17 06:36:34
【问题描述】：

我知道使用<Link> 可以在不刷新页面的情况下动态更改 URL；但是，如果没有<Link>，是否可以这样做？对于上下文，如果变量将其值从false 更改为true，我会尝试将页面上的URL 动态更改为另一个。变量的值不依赖于被点击的按钮，所以这就是我不想使用<Link> 的原因。目前，我在useEffect() 中使用window.top.location.href，它可以完成工作——但由于整个页面重新加载，它非常笨拙。有谁知道如何实现我想要做的事情？

以下是我目前正在做的事情：

useEffect(() => {
  if (status === true) {
    window.top.location.href='https://www.website.com'
  };
}, [status];

【问题讨论】：

这能回答你的问题吗？ Change URl without page refresh NEXT.JS
不幸的是它没有@EmmaKoskinen。那里建议的解决方案涉及浅路由，但这仅适用于同一页面 URL 更改（例如、/fruits -> /fruits?sort=3）。我正在尝试从一页转到完全不同的一页。

标签： javascript reactjs next.js

【解决方案1】：

我想出了一个解决方案。我需要做的就是将window.top.location.href 换成router.push()。以下是按预期工作的更新代码：

useEffect(() => {
  if (status === true) {
    router.push('https://www.website.com')
  };
}, [status];

【讨论】：