无法使用 react 执行路由 获取错误，因为无法读取未定义的属性'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

代码有两个问题。
将getData更改为箭头功能。要访问history，您需要将组件包装在withRouter HOC中。

这是工作代码：https：//stackblitz.com/edit/react-jmgjf4?file=index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link, withRouter } from "react-router-dom";
import TestData from './test-data/test-data';
import TestInfo from './test-info/test-info';
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>
        <div>
          <Route path="/test-data" component={TestData} />
          <Route path="/test-info" component={TestInfo} />
        </div>
      </div>
    )
  }
}
const AppWithRouter = withRouter(App)
const AppContainer = () => {
  return (
    <BrowserRouter>
      <AppWithRouter />
    </BrowserRouter>
  )
}
ReactDOM.render(<AppContainer />, document.querySelector('#root'));

Answer 2

in index.js中的错误包裹 <BrowserRouter> at

//index.js
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root')); 

用于演示应用程序检查此链接

Answer 3

您可以通过在应用程序类中添加以下代码来解决错误：

constructor() {
  this.getData = this.getData.bind(this)
}

问题是this关键字。在JavaScript中，这确实令人困惑，并导致了这些问题。当您将函数this.getData传递到按钮组件时，它试图在按钮组件的范围内执行它，然后失败。

上述代码的作用是基本上告诉函数，将传递的变量用作函数内部的内部this。

Answer 4

1. 您的getData功能不绑定到this上下文，因此它可以访问this.props。您必须绑定它或使用箭头功能：

// Bind it in the constructor
constructor(props) {
    super(props);
    this.getData = this.getData.bind(this);
}
// Or use arrow function
getData = () => {};

2. 您的App组件无法访问history Prop，因为它永远不会得到任何道具。要更改此操作，您必须将BrowserRouter移至App组件之外。您可以在ReactDOM.render添加它。然后，您必须将App组件与react-router的withRouter HOC包装，并将包装组件用作BrowserRouter组件的孩子：

import { withRouter } from 'react-router';
const AppWithRouter = withRouter(App);
ReactDOM.render(<BrowserRouter><AppWithRouter /></BrowserRouter>, document.querySelector('#root'));