React调用history.push报TypeError:Cannot read properties of undefined求助

这个报错核心是useHistory()返回的history对象为undefined，常见两个触发场景和对应修复方案如下： #

前置检查：确认react-router-dom版本 #

在项目根目录执行以下命令查看当前安装的版本：
npm list react-router-dom #

方案1：版本为v6及以上 #

react-router-dom v6已经完全移除useHistory API，替换为useNavigate，直接修改代码即可：

import { useNavigate } from "react-router-dom";
function App(){
  const navigate = useNavigate();
  const onClickNextDateHandler = () => {
    // 替换原history.push为navigate调用
    navigate("/selectlocation/appointment/selectdate");
    console.log("date button runs");
    setNextBtnState("time");
  };

  return(
    <Route exact path="/selectlocation/appointment">
      <Toappointmentcontainer
        postAppointmentRequest={postRequestAppointment}
      />
      <div className="btnwidget">
        <AppointmentNextBtn
          onClickDateHandler={onClickNextDateHandler}
          displayState={nextBtnState}
          text="Next"
          button="button"
        />
      </div>
    </Route>
  )
}

方案2：版本为v5及更早 #

问题出在App组件没有被路由容器包裹，只有BrowserRouter/HashRouter的后代组件才能调用路由相关hooks。修改项目入口文件（通常为index.js），代码示例如下：

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>
)

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