如何使动态路由看起来像 Next.js 中的 static 路由

Question

是否可以在 next.js Router.push function 中将查询路由显示为 static？

我想做这样的事情。

 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] 。