невозможно выполнить маршрутизацию с использованием реакции на получение ошибок, так как не удается прочитать свойство '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

ниже мой код стекаблика: - https://stackblitz.com/edit/react-xtshvq

Answer 1

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 реквизиту, потому что он никогда не получает реквизит. Чтобы изменить это, вы должны переместить BrowserRouter за пределы компонента App. Вы можете добавить его на ReactDOM.render. Затем вам нужно обернуть ваш App компонент с withRouter HOC из react-router и использовать этот обернутый компонент как дочерний элемент для BrowserRouter компонента:

import { withRouter } from 'react-router';

const AppWithRouter = withRouter(App);

ReactDOM.render(<BrowserRouter><AppWithRouter /></BrowserRouter>, document.querySelector('#root'));

Answer 2

Вы можете исправить ошибку, добавив следующий код в класс приложения:

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

Ошибка Wrap <BrowserRouter> в index.js как

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

Для демонстрационного приложения проверьте эту ссылку