Next.js React 应用程序不会在单击链接时加载更新的页面

Question

我正在使用 Next.js 版本 14、App 路由器和来自

next/link

的 Next.js 链接组件。文件结构：文件夹

app/a

包含：

• page.tsx 获取 API，并将数据传递到

  <Table/>

  组件...
• Table.tsx，带有

  "use client"

  的客户端组件。整个表格组件是客户端，因为我使用的是 Mantine 的表格

在

localhost:3000/a

，我有一个表，其中填充了来自 API 的数据。该表中的一列有

Link

，其

href

设置为

localhost:3000/a?param=x

。单击该链接应该会转到同一个表，但该列已被过滤。当我点击链接时，我可以看到浏览器地址栏中的 URL 正确更新，但页面似乎没有更新。但是，刷新页面（现在使用新 URL）会加载更新后的预期表。另外，右键单击 -> 在新选项卡中打开确实会在新选项卡中加载正确的数据。

当我查看 VSCode 控制台时，我可以看到单击链接时正在使用参数获取 API。我注意到，单击链接时，

GET /a?param=x

不会打印到控制台，但是当我刷新页面（具有链接的URL）时，

GET /a?param=x

打印并显示正确的数据。

此问题仅针对

/a

上的链接，前往

/a?param=x

，不适用于从

/a

到

/b

。

Answer 1

我做了一些挖掘，发现将密钥从我的服务器组件（页面）传递到客户端组件（表）——其中

key={query_param}

——解决了这个问题。我相信这些概念被称为 Next 的“部分渲染”和“软导航”？ https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering

非 Next.js 特定：当路由参数更改时组件不会重新挂载