Uncaught TypeError: this.props.history is undefined

Question

尽管使用与视频相同的代码，但在Udemy部分的课程工作对我不起作用。代码应该允许我做一个基于用户名的搜索与选项直接到配置文件或结果的数据库。但是我得到未捕获的类型错误:this.props.history在main.js中未定义Main.js

import React,{Component} from 'react';
import { BrowserRouter as Router,Route ,Routes} from 'react-router-dom';
class Main extends Component{
constructor(props){
super(props);
this.state={
Data:'',
checked:false
};
}
handleChange=(e)=>{
this.setState(()=>({
checked:!this.state.checked
}))
}
Search= (e)=> {
console.log(this.state.Data)
if(this.state.Data==='')return alert('Search field cannot be empty!')
if(this.state.checked){
this.props.history.push({
Pathname:`/Specific/${this.state.Data}`,
})
}else{
this.props.history.push({
Pathname:`/Data/${this.state.Data}`,
})
}
}
render(){
return(
<React.Fragment>
<section className="mainPage">
<center>
<div className="main" id="main">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12">
<div className="main__text-container">
<h1 className="main__title">
GitFetch - Profile Finder for GitHub
</h1>
<p className="main__subtitle">
Check out the repos, followers and more, just by entering a username!
</p>
</div>
<div className="container">
<div className="check">
<input className="" type="checkbox" name="checked" onChange={this.handleChange} value={this.state.checked}/>
Go Direct to The user Profile
</div>
<input type="text" id="search" name="Data" className="btn btn-outline-primary" 
placeholder={this.state.checked?'Go to user profile':'Enter username'} 
onChange={(e)=>{this.setState({[e.target.name]:e.target.value})}}
value={this.state.Data} 

/>
<span>
<button onClick={this.Search} className="btn btn-outline-primary">Search</button>
</span>
</div>
</div>
</div>
</div>
</div>
</center>
</section>
</React.Fragment>
);
}
}
export default Main;

App.js

import React,{Component} from 'react';
import './App.css';
import Nav from './components/nav/nav';
import Main from './components/github/main';
import { BrowserRouter as Router,Route ,Routes} from 'react-router-dom';
class App extends Component{
constructor(props){
super(props);
this.state={};
}
render(){
return(
<React.Fragment>
<Nav/>

<Router>
<Routes>
<Route exact path='/' element={<Main/>}/>
</Routes>
</Router>


</React.Fragment>
);
}
}
export default App;

更改代码为

import React,{Component} from 'react';
import withRouter from '../withRouter';
class Main extends Component{
constructor(props){
super(props);
this.state={
Data:'',
checked:false
};
this.Search=this.Search.bind(this);
}
handleChange=(e)=>{
this.setState(()=>({
checked:!this.state.checked
}))
}
Search= (e)=> {
console.log(this.state.Data)
if(this.state.Data==='')return alert('Search field cannot be empty!')
if(this.state.checked){
this.props.history.push({
Pathname:`/Specific/${this.state.Data}`,
})
}else{
this.props.navigate({
Pathname:`/Data/${this.state.Data}`,
})
}
}

但是我仍然无法用this.props.navigate({)将用户重定向到指定的路径路径名:/Data/${this.state.Data};})

Answer 1

你的props是空的，没有history的instance，提供history实例，你需要用export default withRouter(Main)包装你的组件

但是withRouter在react-router-dom v6中已经被弃用了，所以如果你使用这个版本或更高版本，请为withRouter写一个HOC

这里是react-router-dom的v6及以上版本使用withRouter的参考

https://github.com/remix-run/react-router/issues/7256