Next.js：router.push 不刷新页面

Question

我正在构建一个 next.js 页面/page/data/[dataId]（当用户单击 page 中的链接时导航该页面/page/data，我通过 API 获取项目列表）。

当用户单击按钮时，我调用 API 来从数据库中删除该项目。一旦API调用成功。我需要将用户重定向回/page/data页面。我是这样做的：

 async function removeData(){

    // ... some logic

    await removeData({input});
    setTimeout(()=>{
          router.push("/page/data"); // redirecting to parent
     },2000)

}

一旦用户被重定向回，/page/data/我需要刷新数据项列表，因为我想删除已删除的项目。现在的问题是 -/page/data/浏览后没有刷新 router.push。

我知道我们可以通过替换来实现这一点，router.push但这window.location="/page/data" 是非常昂贵的方式。

我也尝试过：

router.push("/page/data",undefined,{shallow:false})

但没有成功。

任何人都可以帮助我，我们怎样才能以最佳方式实现这一目标？我发现window.location这种方法太昂贵了。

Answer 1

我找到的解决方法是添加查询参数。

例如：

router.push({ pathname: "/page/data", query: { u: "true" } });

因此它将重定向到/page/data?u=true，并且查询参数的存在将强制执行新的 getServerSideProps 调用。我只是选择u表示“更新”。这对我有用，但我意识到这有点麻烦。

作为对其他答案的回应，它不限于删除元素而不重新加载页面。就我而言，我从包含许多项目的页面导航到单独的页面以创建新项目。在这个单独的页面上提交表单时，我使用 router.push 重定向到索引页面，但新项目不在那里。我不确定您的建议是否适合这种情况。

Answer 2

我过去曾使用过这种方法，就像你说的那样，这可能是一种昂贵的方法，但与将部分路由移动到window.location.

router.push('ROUTE').then(() => window.location.reload())

Next router也有reload函数可以调用，但仍然采用after the router的原理。

router.push('ROUTE').then(() => router.reload())