<p dir="auto">I have set up parameterized routing in conjunction with shallow routing in our project as per <a href="https://github.com/zeit/next.js/blob/master/examples/parameterized-routing">https://github.com/zeit/next.js/blob/master/examples/parameterized-routing</a> and <a href="https://github.com/zeit/next.js/tree/master/examples/with-shallow-routing">https://github.com/zeit/next.js/tree/master/examples/with-shallow-routing</a>.</p>
<p dir="auto">The router appears to be replacing history state instead of pushing history state if I push a different parameterized route for the same pathname.  This results in pushing parametrized routes to appear to work until the user attempts to use the browser's back button and it skips over all state changes.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">User follows a link to /example.<br>
Router.push is called with the route /example and asPath /example/test1 and the shallow option.<br>
Router.push is called with the route /example and asPath /example/test2 and the shallow option.<br>
User his the back button and the URL is set to /example/test1.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">User follows a link to /example.<br>
Router.push is called with the route /example and asPath /example/test1 and the shallow option.<br>
Router.push is called with the route /example and asPath /example/test2 and the shallow option.<br>
User his the back button and the URL is set to /example.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>2.4.5</td>
</tr>
<tr>
<td>node</td>
<td>6.9.1</td>
</tr>
<tr>
<td>OS</td>
<td>macOS sierra</td>
</tr>
<tr>
<td>browser</td>
<td>chrome 59</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Editing <code class="notranslate">stlye jsx</code> styles should work with HMR.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When I change a <code class="notranslate">style jsx</code> css property, the page reloads with HMR, but then I get the error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="StyleSheetRegistry: styleId: `jsx-1655195659` not found.
Error: StyleSheetRegistry: styleId: `jsx-1655195659` not found.
    at invariant (http://localhost:3000/_next/-/page/index.js:47200:11)"><pre class="notranslate"><code class="notranslate">StyleSheetRegistry: styleId: `jsx-1655195659` not found.
Error: StyleSheetRegistry: styleId: `jsx-1655195659` not found.
    at invariant (http://localhost:3000/_next/-/page/index.js:47200:11)
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">I started with the <a href="https://github.com/zeit/next.js/tree/canary/examples/with-styled-jsx-scss">with-styled-jsx-scss</a>: <code class="notranslate">npx create-next-app --example with-styled-jsx-scss with-styled-jsx-scss-app</code></p>
<ol dir="auto">
<li>Clone this <a href="https://github.com/MrToph/next-error">minimal reproduction</a>.</li>
<li><code class="notranslate">yarn install</code>, <code class="notranslate">yarn run dev</code></li>
<li>Go to <code class="notranslate">localhost:3000</code></li>
<li>Change a CSS rule, f.i. <code class="notranslate">background-color</code> in <code class="notranslate">src/components/Canvas.jsx</code></li>
<li>See it breaking</li>
</ol>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>v5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>v8.10</td>
</tr>
<tr>
<td>OS</td>
<td>Windows 10</td>
</tr>
<tr>
<td>browser</td>
<td>Latest Chrome</td>
</tr>
</tbody>
</table>