React Router按钮点击触发goBack不生效报错问题如何解决

问题原因 #

这个报错有两个常见触发场景：

1. 你使用的是react-router-dom v6及以上版本，该版本已经完全移除了useHistory钩子，调用useHistory()会直接返回undefined，读取goBack方法自然抛出异常
2. 若你使用的是react-router-dom v5版本，问题出在你的App组件没有被BrowserRouter上下文包裹，路由钩子无法拿到路由实例

修复方案 #

方案1：适配v6版本（推荐） #

1. 修改导入语句，替换useHistory为v6新增的useNavigate钩子：

import {
  BrowserRouter,
  Route,
  useNavigate
} from "react-router-dom";

2. 修改GoBack组件逻辑，navigate(-1)等价于原history.goBack()的回退效果：

function GoBack(){
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-1)}>Back</button>
    </>
);
}

3. 检查入口文件（通常是index.js），确保App组件被BrowserRouter包裹：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

方案2：降级到v5版本 #

如果你要沿用现有useHistory的写法，可以将依赖版本回退到v5最终稳定版：

npm install react-router-dom@5.3.4

安装完成后只需要补全入口文件的BrowserRouter包裹逻辑即可正常运行。

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