React Router goBack未将上一位置推入路由栈的问题

这个问题我之前也碰到过，本质是对React Router的history操作逻辑理解有偏差，咱们一步步拆解解决：

问题原因 #

当你从列表页（比如/list）进入详情页（比如/detail/:id）时，浏览器的历史栈结构是：[/list, /detail/1]。此时调用history.goBack()只是移动历史指针到上一个位置（也就是/list），并没有在历史栈中新增条目。所以当你回到列表页后，点击浏览器后退按钮，会跳转到/list之前的页面，而不是你期望的详情页。

解决方案 #

别再用history.goBack()了，改用history.push('/list')。这个方法会向历史栈中添加一个新的列表页条目，此时历史栈会变成：[/list, /detail/1, /list]。这样当你在列表页时，点击浏览器后退按钮就会回到详情页，点击前进按钮则回到列表页，完全符合你的需求。

代码示例 #

在你的详情页组件里，这样实现「保存并关闭」按钮：

import { useHistory } from 'react-router-dom';

function DetailPage() {
  const history = useHistory();

  // 模拟保存数据的函数，替换成你的实际保存逻辑
  const saveYourData = () => {
    // 比如调用API提交表单数据
    console.log('数据已成功保存');
  };

  const handleSaveAndClose = () => {
    // 先执行保存操作
    saveYourData();
    // 将列表页路由推入历史栈
    history.push('/list');
  };

  return (
    <div className="detail-page">
      {/* 这里是你的详情页内容 */}
      <h1>详情页</h1>
      <button onClick={handleSaveAndClose}>保存并关闭</button>
    </div>
  );
}

export default DetailPage;

额外说明 #

• 如果你担心重复推入列表页导致历史栈过长，可能会想到用history.replace('/list')，但这个方法会替换当前的历史条目（把/detail/1替换成/list），这样后退按钮还是无法回到详情页，所以这个场景下不推荐使用。
• 注意确保你已经正确引入了useHistory钩子（React Router v4/5中是这个钩子，v6版本则是useNavigate，你明确用的是v4，所以用useHistory没问题）。

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