为什么在Router内部使用useHistory时返回值为undefined？

问题原因 #

你遇到的报错由以下几个常见错误导致：

1. useHistory调用方式错误
   react-router-dom提供的useHistory hook返回值本身就是history实例，不需要从返回值中解构history属性。你当前代码的写法const { history } = useHistory()相当于尝试从history实例上读取不存在的history属性，自然会得到undefined。
   正确写法为：

const history = useHistory()

2. react-router-dom版本适配问题
   如果你使用的是v6及以上版本的react-router-dom，useHistory已经被正式移除，替换为useNavigate hook，对应写法调整为：

import { useNavigate } from 'react-router-dom'

const Header = (props) => {
  const classes = useStyles();
  const navigate = useNavigate();
  const logOut = () => {
    navigate('/login')
    // clearLocalStorage();
  };
  // 其余组件逻辑保持不变
}

3. Router组件导入校验
   确认你index.js中导入的Router是BrowserRouter的别名：

// 正确导入写法
import { BrowserRouter as Router } from 'react-router-dom'

如果你直接导入了基础Router组件且没有手动传入history prop，也会导致路由上下文的history对象为空，触发报错。

补充说明：你的Header组件虽然没有直接被Route组件渲染，但只要处在Router组件的包裹范围内，就具备访问路由上下文的条件，不需要调整现有组件层级。

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