3

I have the following page in a next.js app: pages/products/[category].js. This page has a sorting system which sorts the products by price, date, title etc. Example: http://localhost:3000/products/music?sortBy=price-asc.

I have a select with all the options and the following onChange:

onChange={(e) => {
  router.push({
    pathname: router.asPath, // to get the current route (`products/music`)
    query: { sortBy: e.target.value },
  });
}}

When I first visit the page and I have no query params added to the url, the redirect works as expected. But when I do it again, instead of replacing sortBy, it adds a second one.

So the url becomes: http://localhost:3000/products/music%3FsortBy=price-asc?sortBy=price-desc

Any way to properly update the query params?

felixmosh
  • 32,615
  • 9
  • 69
  • 88
Norbert
  • 2,741
  • 8
  • 56
  • 111
  • You can refer this stackoverflow https://stackoverflow.com/questions/63360586/next-js-add-slug-params-to-clean-url – gautam siva Aug 15 '20 at 10:02

0 Answers0