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

将index.js中的错误包装<BrowserRouter>

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

对于演示应用程序，请检查此link

Answer 2

您可以通过将以下代码添加到App类来解决该错误：

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

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

以上代码的作用是基本上告诉函数使用传递的变量作为函数内部的this。

Answer 3

代码有几个问题。
将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 4

您的getData函数未绑定到this上下文，因此它无法访问this.props。您必须将其绑定或使用箭头功能：

// Bind it in the constructor
constructor(props) {
    super(props);
    this.getData = this.getData.bind(this);
}

// Or use arrow function
getData = () => {};

您的App组件无法访问history道具，因为它从未获得任何道具。要更改此设置，您必须将BrowserRouter移到App组件之外。您可以在ReactDOM.render上添加它。然后，您必须使用App的{{1}} HOC来包装withRouter组件，并将该包装的组件用作react-router组件的子代：

BrowserRouter

无法使用反应得到错误进行路由，因为无法读取未定义的属性“ props”

4 个答案: