如何在Next.js中使动态路由看起来像静态路由

Question

是否可以在next.js Router.push函数中将查询路由显示为静态？

我想做这样的事情。

Router.push(
`/statistics?entityId=${id}&entityType=Player&serviceProvider=${serviceProvider}&tab=overview`,
`/statistics/player/id`,
{
shallow: true
}

Answer 1

可以使用查询参数更新路由路径，而无需使用shallow-routing再次运行数据获取方法。但需要注意的是，浅层路由仅适用于同一页面 URL。请参阅文档中的注意事项部分

因此，如果您尝试更新/statistics?entityId=${id}这仅对/statistics页面有效。您无法/statistics/player/[id]页面中获取更新的查询参数，因为它们是两个不同的页面。

这对/statistics页面有效

Router.push(
`/statistics?entityId=${id}&entityType=Player&serviceProvider=${serviceProvider}&tab=overview`,
{ shallow: true }
)

因此，您可以在/statistics页面中使用浅层路由并使用router.query访问更新的查询参数，然后基于它呈现数据，或者您可以拥有多个动态路由，如/statistics/player/[id]、/statistics/some-other-entity/[id]。