Next.js Router动态URL与浏览器返回按钮异常问题求助

问题根源 #

你使用的Router.push('/contract', /contract/${id})是Next.js早期的路由写法，第一个参数是实际加载的页面路径，第二个as参数是浏览器地址栏显示的URL。这种写法会导致客户端导航的路由逻辑与URL记录不同步，进而让history栈生成异常记录，最终引发返回按钮的行为异常。

解决办法 #

1. 改用标准动态路由实现 #

在pages目录下创建contract/[id].js（或.tsx）动态页面组件，然后直接调用路由跳转：

Router.push(`/contract/${id}`);

这种方式会让Next.js自动匹配动态路由规则，同时正确维护history栈，返回按钮即可恢复正常功能。

2. 规范使用as参数（旧项目兼容） #

如果因项目架构限制无法修改页面结构，改用对象形式传递路由参数，明确同步query信息：

Router.push(
  { pathname: '/contract', query: { id } },
  `/contract/${id}`
);

该写法能确保页面组件正确接收id参数，同时让history栈记录与导航行为同步，避免返回时的URL与内容不匹配问题。

3. 临时修复history异常 #

若上述方案无法立即落地，可通过监听popstate事件手动同步路由状态：

window.addEventListener('popstate', () => {
  const currentPath = window.location.pathname;
  Router.push(currentPath);
});

注意：此方案仅作为临时应急手段，长期来看仍需规范路由写法从根源解决问题。

内容的提问来源于stack exchange，提问作者Waggoner_Keith