非SPA场景下如何用React history修改浏览器上一个URL及处理返回按钮

嘿，我来帮你梳理下这个问题，结合你的非SPA场景，咱们一步步解决：

首先得指出你代码里的一个明显小错误：history.go(testUrl)是不对的用法哦！history.go()方法只接受整数参数——比如history.go(-1)是后退一页，history.go(1)是前进一页，没法直接传URL。如果想在返回时跳转到指定地址，得用history.push()或者history.replace()才行。

接下来针对你的两个核心需求逐一拆解：

1. 能不能避免history.push()改变当前浏览器URL？ #

其实history.push()的设计目的就是给浏览器历史栈加一条新记录，同时导航到这个URL，所以它必然会修改当前地址栏的内容。如果你的需求是不想新增历史记录，只是替换当前的历史条目，可以用history.replace(testUrl)——它会替换掉当前的历史记录，同样会改URL，但不会多占一个栈位置。

要是你完全不想改当前URL，还想控制后续的返回行为，这其实有点违背浏览器历史栈的默认逻辑。这种情况下，不如直接监听popstate事件来拦截返回操作，而不是提前动历史栈。

2. 点击浏览器返回按钮时，跳转到指定URL（而非默认上一页） #

考虑到你的应用不是SPA，其实直接用原生window.history会比history库更顺手，毕竟这个库本来是为SPA的客户端路由设计的。给你个调整后的代码示例：

const testUrl = 'http://test.com';

// 添加一条历史记录（此时URL会改变）
window.history.pushState({ path: testUrl }, '', testUrl);

// 监听浏览器返回事件
window.addEventListener('popstate', (event) => {
  // 拦截默认返回行为
  event.preventDefault(); 
  // 用replaceState替换当前历史记录，避免陷入返回循环
  window.history.replaceState(null, '', testUrl);
  // 非SPA场景下，要实际跳转的话直接用location.href
  window.location.href = testUrl;
});

要是你坚持想用history库，修正后的代码应该是这样：

import createHistory from 'history/createBrowserHistory';
const history = createHistory();
const testUrl = 'http://test.com';

history.push(testUrl);

window.addEventListener('popstate', (event) => {
  // 用replace替换当前历史条目，防止返回后又回到旧记录
  history.replace(testUrl);
  // 要是需要强制导航也可以用push，但注意别让历史栈无限增长
  // history.push(testUrl);
});

额外提醒： #

• 非SPA场景下，window.location.href会触发页面刷新，这是正常的，毕竟多页应用本来就是靠页面跳转实现的。
• popstate事件只有在浏览器手动前进/后退时才会触发，调用pushState或replaceState不会触发它哦。
• 部分浏览器可能不支持event.preventDefault()阻止popstate的默认行为，这种情况下直接替换URL并跳转就好。

内容的提问来源于stack exchange，提问作者Vinicius Konig Ferreira