React中history.goBack()单次点击不生效、需双击触发的原因是什么

history.goBack()需双击才生效的原因及解决方法 #

1. 历史栈存在重复路由记录（最高概率） #

这是最常见的触发原因：从首页跳转到页面1的逻辑中，不小心连续调用了两次history.push('/页面1对应路由')，导致浏览器历史栈的顺序为 首页 -> 页面1 -> 页面1。
此时第一次调用goBack()是回退到第一个页面1记录，页面视觉无变化，第二次调用才会回退到首页，表现为需要双击才生效。
可通过加日志验证：

const handleBack = () => {
  console.log('当前历史栈长度：', window.history.length)
  console.log('当前路由：', history.location.pathname)
  history.goBack()
}

如果第一次点击后路由路径不变、历史栈长度减1，即可确认是该问题。
解决方法：

• 检查页面1的跳转逻辑，移除重复的push调用
• 跳转时用history.replace代替history.push，避免生成重复历史记录

2. 绑定点击事件的DOM属性语法错误 #

你代码中触发点击的div属性存在语法错误：

// 错误写法
<div  mr-2 ml-1" onClick={handleBack}>

mr-2 ml-1是类名参数，你漏写了className=前缀，且属性前后引号不配对，可能导致DOM渲染异常、点击区域识别错误。
修正为正确写法即可：

<div className="mr-2 ml-1" onClick={handleBack}>

3. 事件冒泡/默认行为干扰 #

如果点击区域上层DOM绑定了其他点击事件，或者svg的点击冒泡触发了额外逻辑，可以给回调加事件拦截：

const handleBack = (e) => {
  e.stopPropagation()
  e.preventDefault()
  history.goBack()
}

4. React严格模式重复执行（仅开发环境） #

如果项目开启了React严格模式<React.StrictMode>，开发环境下部分回调会被重复执行两次，生产环境会自动恢复正常，可以临时关闭严格模式验证是否是该原因。

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