在react-router-dom中如何替换浏览器历史条目并删除带参数的历史项

问题根因 #

原生window.history.replaceState接口的作用本身就是替换当前浏览器历史栈的栈顶条目，不会新增历史记录。正常场景下，你访问带mytoken参数的页面后调用replaceState，只会把历史栈里唯一的那条带参数的记录替换为不带参数的版本，历史栈总长度始终为1，不会出现两条记录。

你现在遇到的两条记录问题，完全是项目中额外的history.listen监听逻辑导致的：

• 初始加载带mytoken参数的页面时，第一条带参数的记录被推入历史栈
• 监听逻辑触发PUSH动作判断，检测到路径/搜索参数变更后，主动调用history.push新增了一条记录，同时你的replaceState又修改了地址，最终就形成了带参数、不带参数两条历史条目

解决方案 #

方案1：改造history监听逻辑（推荐） #

你当前的监听逻辑存在冗余的重复push操作，本身监听路由变更后再主动push一次的逻辑完全不必要，直接删掉这部分即可。如果这段逻辑是为了实现禁止用户回退的需求，可以修改为如下形式，排除清理mytoken参数的场景：

history.listen((newLocation, action) => {
  // 跳过mytoken参数清理的场景，不做额外处理
  if (newLocation.search.includes('mytoken') || !newLocation.search) {
    return
  }
  if (action === "PUSH") {
    if (
      newLocation.pathname !== this.currentPathname ||
      newLocation.search !== this.currentSearch
    ) {
      this.currentPathname = newLocation.pathname;
      this.currentSearch = newLocation.search;
      // 删除原有的冗余history.push逻辑
    }
  } else {
    history.go(1);
  }
});

修改后你原本的参数清理代码不需要改动，replaceState会直接替换掉当前的带参数历史记录，不会残留多余条目。

方案2：调整代码执行顺序 #

如果暂时无法修改监听逻辑，可以将mytoken参数清理逻辑的执行顺序提前到history.listen初始化之前，确保地址先被替换为不带参数的形式，再初始化监听逻辑，避免触发重复push操作：

// 先执行参数清理，执行顺序早于history监听初始化
if(window.location.search == "?mytoken=abc") {
  window.history.replaceState(null, '', window.location.pathname);
}
// 再初始化history监听逻辑
// history.listen(...)

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