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

Question

Is it possible to do show query routes as static in next.js Router.push function?

I want to do something like this.

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

Answer 1

It is possible to update the route path with query params without running data-fetching methods again using shallow-routing . But the caveat is shallow routing will only work on the same page URL. See the caveats section in the docs

So if you try to update /statistics?entityId=${id} this is only valid for the /statistics page. You can not get the updated query param in /statistics/player/[id] page because they are two different pages.

This is valid for /statistics page

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

So you can either use the shallow-routing in /statistics page and use router.query to access the updated query params then render the data based on it or you can have multiple dynamic routes like /statistics/player/[id] , /statistics/some-other-entity/[id] .