如何在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。请参见docs

中的注意事项部分

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

这对/statistics页有效

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

因此，您可以使用/statistics页中的浅层路由并使用router.query来访问更新的查询参数，然后根据其呈现数据，或者可以使用多种动态路由，例如{{1 }}，/statistics/player/[id]。