如何使動態路由看起來像 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] 。