我正在开发React应用。我在其他组件的子组件中使用Header.js组件。 当我单击链接时，它不会重定向到其他组件，它会在错误消息后显示。
未捕获的TypeError：无法读取未定义的属性“ push”
使用“ react”的版本：“ ^ 16.12.0”，“ react-router-dom”：“ ^ 5.1.2”，
由于堆栈溢出而大量出现，但没有人在工作。请帮助
Header.js
import React from 'react';
import axios from 'axios';
import { history } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
//import { useHistory } from "react-router-dom";--> Not Working
class Header extends React.Component {
constructor(props) {
super(props)
this.state = {
Search: '',
guid:'',
activeOption: 0,
filteredOptions: [],
showOptions: false,
userInput: ''
}
this.onChangeSearch = this.onChangeSearch.bind(this);
this.routeChange = this.routeChange.bind(this);
this.Redirect = this.Redirect.bind(this);
}
onChangeSearch= (e) => {
this.setState({ Search: e.target.value })
const obj = {
User_Guiid:guid,
Search:this.state.Search
}
if(this.state.Search!="")
axios.post('http://localhost:xxxx/Api/Authenticate/Searchuser', obj }).then(response => {
// console.log(response.data)
if(response.status=="200")
{
this.setState({
filteredOptions:response.data
})
console.log(this.state.filteredOptions)
}
})
.catch((error) =>{
alert("Your Session time expired.Please Login Again."+error);
this.props.history.push('/'); --> Redirect Working
});
e.preventDefault();
}
handleClick = (e) => {
e.preventDefault();
var guid= localStorage.getItem('Guiid');
console.log(guid);
// this.props.history.push('/')
this.props.history.push('/Profile/'+guid);--> Redirect Not Working
}
routeChange() {
var guid= localStorage.getItem('Guiid');
this.props.history.push('/Profile/'+guid);--> Redirect Not Working
}
Redirect(){
var guid= localStorage.getItem('Guiid');
this.props.history.push('/dashboard/'+guid);--> Redirect Not Working
}
Follow(e,guid){
this.props.history.push('/follow/'+guid);--> Redirect Not Working
}
Clear(){
this.setState({ Search: ''})
window.location.reload();
}
Follows(e,guid){
//const history = useHistory();
console.log(guid)
var id= localStorage.getItem('Guiid');
if(guid==id)
{
//history.push('/follow/'+guid) --> Redirect Not Working;
this.props.history.push('/follow/'+guid);--> Redirect Not Working
}else{
//history.push('/follow/'+id) --> Redirect Not Working;
this.props.history.push('/follow/'+id);--> Redirect Not Working
}
}
render() {
return (
<nav className="NXc7H jLuN9">
<div className="XajnB"></div>
<div>
<div className="_8MQSO Cx7Bp">
<div className="_lz6s ">
<div className="MWDvN ">
<div className="oJZym">
<a href='' onClick={() => this.Redirect()}>
<div className=" Igw0E rBNOH eGOV_ ybXk5 _4EzTm ">
<div className="SvO5t"></div>
<div className="cq2ai">
<img alt="" className="s4Iyt" src={Logo} />
</div>
</div>
</a>
</div>
<div className="LWmhU _0aCwM">
<input className="XTCLo x3qfX " type="text" autoCapitalize="none" placeholder="Search" value={this.state.Search} onChange={this.onChangeSearch} />
<span className="mlrQa coreSpriteSearchIcon sprite_search"></span>
{
this.state.filteredOptions.map((user)=>{
return (
user.length != 0?
<div className="jLwSh" role="dialog"></div>
:null
)
})
}
<div className="kbKz8">
<div className="VR6_Q"></div>
<div className="drKGC">
{
this.state.filteredOptions.map((user)=>{
return (
user.length != 0?
<div className="fuqBx">
<a className="yCE8d " href="" onClick={(e) => this.Follows(e,user.User_Guiid)}>
<div className="z556c">
<div className="RR-M- g9vPa" role="button" tabindex="0">
<canvas className="CfWVH" height="42" width="42" style={{position: 'absolute', top: '-5px', left: '-5px', width: '42px', height: '42px'}}></canvas>
<span className="_2dbep " role="link" tabindex="0" style={{width: '32px', height: '32px'}}>
<img alt="" className="_6q-tv" src={require("../../img/Profile/"+user.UserImage)}/>
</span>
</div>
<div className="_2_M76">
<div className="uyeeR">
<span className="Ap253">{user.Username}</span>
<div className="JbY-k coreSpriteVerifiedBadgeSmall"></div></div>
<span className="Fy4o8">{user.Fullname}</span>
</div>
</div>
</a>
</div>
:null
)
})
}
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
)
}
}
export default Header