title: Update Next.js query params using router
body: <p>I have the following page in a next.js app: <code>pages/products/[category].js</code>. This page has a sorting system which sorts the products by price, date, title etc. Example: <code>http://localhost:3000/products/music?sortBy=price-asc</code>.</p>
  
  <p>I have a select with all the options and the following <code>onChange</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>onChange={(e) =&gt; {
    router.push({
      pathname: router.asPath, // to get the current route (`products/music`)
      query: { sortBy: e.target.value },
    });
  }}
  </code></pre>
  
  <p>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 <code>sortBy</code>, it adds a second one.</p>
  
  <p>So the url becomes: <code>http://localhost:3000/products/music%3FsortBy=price-asc?sortBy=price-desc</code></p>
  
  <p>Any way to properly update the query params?</p>