在 next.js 中使用浏览器后退按钮时，动态路由页面不会出现

Question

In a Next.js project, I am coming across a situation where I get a new URL path from an API. And I have to update that URL path in the browser without reloading that page.

I am doing that with the help of History.pushState()

window.history.pushState(nextState,nextTitle,nextURL);
window.history.replaceState(nextState,nextTitle,nextURL);

With help of History.pushState() I am able to update the URL in the browser without reloading that page. But If after I change that URL multiple times and change to some other page. Then if I start pressing the browser back button, I am not able to get that page with the last URL path showing in the browser.

Only that last URL path shows up in the browser URL input, but that page data is not reflected. Attaching the sample code and reproducing steps video link below. Any help and suggestions are appreciated.

Source Code

Codesandbox

Reproducing Steps

Answer 1

I am also facing same problem, after using history.pushState() browser back button will not work in that page, because according to browser you never went to that page. That location doesn't exists in JavaScript history object.