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
}
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].
