在使用的react版本如下:
在使用class组件时,期间用到this.props.history.push这段代码,chrome浏览器报错:
部分代码如下:
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方法未定义等等,故此方法可行性也不高)。
请问还有什么简便的方法可以解决this.props.history.push报错的问题?