title: is there a way to keep router query on page refresh in nextjs
body: <p>I have a dynamic page with a dynamic url. everything is clientside rendered. </p>
  
  <p>This is the <code>link</code> that links to the second page</p>
  
  <pre><code>&lt;Link
  href= {{ pathname: '/dashboard/[orderdetail]', query: { id: `${orderID}` } }} as={`/dashboard/${orderDetails.orderNo}`}
  &lt;/Link&gt;
  </code></pre>
  
  <p>This works well taking every query to the second page. But when I refresh the second page, everything is lost. Every query i had passed is lost</p>
  
  <p>I have tried using <code>with/Router</code> </p>
  
  <pre><code>let orderID=this.props.router.query.orderdetail;
  </code></pre>
  
  <p>Still on page refresh everything is lost.</p>
  
  <p>I need the <code>query string</code> i am passing to the second page to make a call to a database which works well. But again, when I refresh the page nothing works.</p>
  
  <p>How can I avoid this loss when the page refreshes. </p>