CODEWITHSUNDEEP
javascriptreactjsnext.js
Mark James
Mark James

Reputation: 568

How can make dynamic route to look like static route in Next.js

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
   }

Upvotes: 1

Views: 628

Answers (1)

subashMahapatra
subashMahapatra

Reputation: 6857

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

Upvotes: 2

Related Questions