无法做出路由使用反应获取错误，因为无法读取未定义的属性'props'

Question

嗨，我是一个新手反应我正在尝试的是从一个组件导航到另一个组件，为此我使用了以下逻辑

class App extends Component {
  getData(){
    this.props.history.push('/test-data');
  }
  render() {
    return (
      <div>
        <h1>ReactJS</h1>
        <div >
          <button  id="data" onClick={this.getData}>test data</button>
          <button  id="con">test info</button>
        </div>
        <BrowserRouter>
            <div>
              <Route path="/test-data" component={TestData} />
              <Route path="/test-info" component={TestInfo} />
            </div>
        </BrowserRouter>
      </div>
    )
  }}

当我尝试导航到页面时，我遇到了错误

Cannot read property 'props' of undefined

下面是我的stackblitz代码： - https://stackblitz.com/edit/react-xtshvq

Answer 1

您可以通过将以下代码添加到App类来修复错误：constructor() {   this.getData = this.getData.bind(this)}问题是this关键字。在JavaScript中，它确实令人困惑并导致了这些问题。将函数传递this.getData给按钮组件时，它会尝试在按钮组件的范围内执行它，然后失败。上面的代码做的是它基本上告诉函数使用传递的变量作为this函数内部。