React SSR项目浏览器后退按钮需点击两次才可返回问题

自定义开发的React SSR项目存在如下异常：从localhost:3000/page页面返回localhost:3000首页时，需要连续点击两次浏览器后退按钮才能操作成功，经排查问题根因为系统生成了重复的location历史记录，现象如下：

对应修复方案 #

• 排查前端hydrate阶段的路由初始化逻辑
  SSR场景下服务端返回的HTML已经包含了初始路由状态，前端hydrate完成后不要额外调用history.push()加载当前路由，重复的push操作会新增一条完全相同的历史记录，导致需要多退一次。
• 替换同路径重定向的API
  如果/page页面有参数校验、权限校验逻辑需要做同路径重定向，不要使用history.push()，改用history.replace()，replace会直接替换当前历史记录不会新增条目，不会产生冗余记录。
• 校验服务端与客户端路由配置一致性
  如果使用React Router，需确认服务端StaticRouter传入的location参数，和客户端BrowserRouter的路由注册规则完全匹配：比如路径大小写、末尾斜杠、参数规则等。如果两者不匹配，客户端hydrate后会自动触发一次重定向，新增一条历史记录。

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