react，将class组件的代码改成函数组件的代码后报错？

在使用的react版本如下：

img


在使用class组件时，期间用到this.props.history.push这段代码，chrome浏览器报错：

img


部分代码如下：

renderHousesList() {
    return this.state.housesList.map(item => (
      <HouseItem
        onClick={() => this.props.history.push(`/detail/${item.houseCode}`)}
        // onClick={() => <Link to={"/detail/" + item.houseCode} />}
        key={item.houseCode}
        src={BASE_URL + item.houseImg}
        title={item.title}
        desc={item.desc}
        tags={item.tags}
        price={item.price}
      />
    ))
  }

为解决此问题，在网上搜索了一些方法，例如：
1、把this.props.history.push改成Link to（如上注释掉的代码所示），点击后浏览器没有报错也没有反应（故此方法无效）；
2、使用withRouter（withRouter已在es6里被移除了，故此方法可行性不高）；
3、在父组件里传值写一段代码，如history={this.props.history}，然后在子组件里等于一个history.push（this.props.history.push所在的组件的父组件为node_modules里的组件Route.Provider，不希望修改其代码以免造成其他难处理的问题，故此方法也可行性不高）；
4、把class组件里的所有代码改成函数组件的代码，然后使用hook，将this.props.history.push改成navigate（本class组件里的的代码有几百行，虽然修改成函数组件的代码不会太费事，但修改后陆续报各种各样的错误，如百度地图的getZoom方法未定义等等，故此方法可行性也不高）。

img

请问还有什么简便的方法可以解决this.props.history.push报错的问题？

这个错是因为history没有push方法