React应用中第三方库跳转代码在Chrome与Safari表现差异及代码作用咨询

这段代码的实际作用 #

先拆解代码里的三个连续操作（逗号运算符会依次执行每个表达式，返回最后一个的结果）：

1. history.pushState({}, "", url)：向浏览器历史栈中添加一条新记录，地址栏会更新为传入的url，但不会触发页面刷新
2. history.pushState({}, "", window.location.href)：此时地址栏已经是第一步修改后的url，所以这一步是向历史栈再添加一条相同url的记录
3. history.back()：让浏览器回退到历史栈的上一条记录，也就是第一步添加的那条url记录

这段代码的意图应该是：在不刷新页面的前提下修改地址栏，同时让用户点击回退按钮时，先回到当前页面的“副本”，再回退到更早的页面——但这个逻辑本身就很怪异，属于非常规的历史栈操作。

Chrome和Safari表现不同的原因 #

两者的差异源于浏览器对history.pushState和history.back的执行时机、历史栈同步逻辑的处理不同：

• Chrome：当第一步执行pushState修改地址后，React路由（比如react-router）会立即监听地址变化并渲染目标页面。后续两步操作虽然修改了历史栈，但地址最终还是回到第一步的目标url，页面已经完成渲染，所以看起来是“正确跳转”。
• Safari：Safari对连续的历史栈操作处理更严格，可能会将短时间内的连续pushState操作合并，或者history.back()执行时，第二步的pushState还未完全写入历史栈。此时back()会直接回退到点击按钮前的原始页面，导致出现返回上一页的错误行为。

简单说，这段代码依赖了浏览器对历史栈操作的非标准实现，所以在不同浏览器中表现不一致。

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