NextJs：在传递查询字符串时尝试硬导航到相同的 URL 错误

Question

我正在研究 NextJs 版本

13.0.2

和 ReactJs 版本

18.2.0

。我想在 URL 中传递一个查询字符串，但我得到：

Error: Invariant: attempted to hard navigate to the same URL /@workamirdanesh?w=true http://localhost:3000/@workamirdanesh?w=true

当我转到

http://localhost:3000/@workamirdanesh

URL 时一切正常。但是当我添加一个查询字符串如：

?w=true

并且它变成：

http://localhost:3000/@workamirdanesh?w=true

，我得到上面的错误。

我该如何解决，这里的问题是什么？显然，查询字符串不应该抛出错误，并且应该在查询字符串之前加载带有 URL 的页面。

更新：我更新了NextJs版本到

13.0.7

，问题依然存在

Answer 1

遇到同样的问题

Unhandled Runtime Error
Error: Invariant: attempted to hard navigate to the same URL /listings/ http://localhost:3000/listings/

好像是在返回404页面的时候出现的，所以如果页面返回404，你点击同一个链接，就会出现上面的错误。

Answer 2

值得检查一下你的

router.push

。我们有同样的问题，我们把

router.asPath

到

pathname

.

    router.push(
      {
        pathname: router.pathname, // not router.asPath
        query: { confirm: true },
      },

将其更改为

router.pathname

已解决。

Answer 3

有同样的问题：

Error: Invariant: attempted to hard navigate to the same URL / http://localhost:3000/

但是，

1. npx kill-port 3000 

2. 再次由

   npm run dev

运行服务器

对我有用

Answer 4

面临的问题：

在我的例子中，我试图导航到一个尚未创建或根本不存在的页面，所以第一次刷新它工作正常但如果我尝试使用 next/link 标签导航到相同的 URL，它给出了这个错误。

解决方案：

解决/解决方法的一个技巧是使用链接标记的as属性将此路由处理为动态，并让 href 属性为空。

<Link href="" as="/something">Go to something</Link>