<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">I'm doing a <code class="notranslate">router.push</code> using url, as,  and passing query object in options parameter.</p>
<p dir="auto">When the page is rendered from the server side, the query string is processed fine. However, when using <code class="notranslate">router.push</code>, query seems to be ignored.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository: <a href="https://github.com/hgezim/nextjs-scrolll-custom-route-bug">https://github.com/hgezim/nextjs-scrolll-custom-route-bug</a></p>
<ol dir="auto">
<li>Clone <a href="https://github.com/hgezim/nextjs-scrolll-custom-route-bug/">https://github.com/hgezim/nextjs-scrolll-custom-route-bug/</a></li>
<li>Checkout <code class="notranslate">query_param</code> branch</li>
<li>Run <code class="notranslate">npm run dev</code></li>
<li>Navigate to <code class="notranslate">http://localhost:4000/recipes/diet-halal?cuisine=greek</code></li>
<li>Notice in the dev console that the query is set to <code class="notranslate">query L7: Object { cuisine: "greek", filter: "diet-halal" }</code>.</li>
<li>Click the button labeled 95 on the page.</li>
<li>Notice that <code class="notranslate">cuisine</code> isn't picked up here and it only shows <code class="notranslate">filter</code> parameter as part of query in dev console: <code class="notranslate">query L7: Object { filter: "diet-halal" }</code></li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">I expect the log statement to look the same when I press button <code class="notranslate">95</code>, namely: <code class="notranslate">query L7: Object { cuisine: "greek", filter: "diet-halal" }</code><br>
A clear and concise description of what you expected to happen.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Browser (if applies) Firefox 70.0.1</li>
<li>Version of Next.js: 9.1.4</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Add any other context about the problem here.</p>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Using Next 9's routing solution for a Universal App, "router.query" for post-SSR client-side navigation is never populated even if <code class="notranslate">asPath</code> contains a query string for any of the following<br>
router access methods:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { SingletonRouter, useRouter, withRouter } from 'next/router';"><pre class="notranslate"><code class="notranslate">import { SingletonRouter, useRouter, withRouter } from 'next/router';
</code></pre></div>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Perform an initial navigation to <code class="notranslate">/search?term=hello</code>, the server rendered page's router information contains a populated "query":</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const router = useRouter();
console.log({ router }); // asPath: &quot;/search?term=hello&quot;, pathname: &quot;/search&quot;, query: { term: &quot;hello&quot; }"><pre class="notranslate"><code class="notranslate">const router = useRouter();
console.log({ router }); // asPath: "/search?term=hello", pathname: "/search", query: { term: "hello" }
</code></pre></div>
<p dir="auto">Then navigate to the same pathname, with a different query string: <code class="notranslate">/search?term=bye</code>. At this point Router empties "query", but has the correct new <code class="notranslate">asPath</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const router = useRouter();
console.log({ router }); // asPath: &quot;/search?term=hello&quot;, pathname: &quot;/search&quot;, query: {}"><pre class="notranslate"><code class="notranslate">const router = useRouter();
console.log({ router }); // asPath: "/search?term=hello", pathname: "/search", query: {}
</code></pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">For the client side navigation to a route with specified query parameters such as <code class="notranslate">/search?term=bye</code>, <code class="notranslate">router.query</code> contains the parsed query string.</p>
<p dir="auto">If this is not expected, it would be helpful to better document this behavior and the correct approach on the client. I would prefer to always access routing information off of the available hook / HOC rather than off window on the client to avoid a split-brain solution between the client and the server.</p>