Невозможно прочитать свойство push из undefined в реакции

Question

    import React, {PropTypes} from 'react';

export default class Login extends React.Component {
  constructor(props) {
    super(props)
    this.handleLogin = this.handleLogin.bind(this)
  }

  handleLogin(event) {
    event.preventDefault()
    // do some login logic here, and if successful:
    this.props.history.push(`/Home`)
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleLogin}>
          <input type='submit' value='Login' />
        </form>
      </div>
    )
  }
}

Я получаю Невозможно прочитать свойство 'push' из неопределенного в консоли.Теперь, как получить доступ к push-адресу в activ-router v4.

Заранее спасибо!

Answer 1

Вот требования, которые должны заставить его работать:

требуемый импорт для index.js:

import { Provider } from 'react-redux';
import { createHashHistory } from 'history';
import { ConnectedRouter, connectRouter, routerMiddleware } from 'connected-react-router';

в вашем основном App.js, который вам нужен:

const history = createHashHistory();
ReactDOM.render(
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <App />
            </ConnectedRouter>
        </Provider>,
        rootEl,
    );

Там, где вы хотите использовать push:

import { push as RouterPush } from 'react-router-redux';

Answer 2

Оберните ваш компонент withRouter, чтобы получить реквизит истории, чтобы вы могли использовать push

Answer 3

Похоже, ваш компонент не обернут маршрутизатором.оберните это withRouter.

import React, { PropTypes } from "react";
import { withRouter } from "react-router-dom";

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin(event) {
    event.preventDefault();
    // do some login logic here, and if successful:
    this.props.history.push(`/Home`);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleLogin}>
          <input type="submit" value="Login" />
        </form>
      </div>
    );
  }
}
export default withRouter(Login);

Answer 4

По умолчанию использование не может использовать browserHistory в реагирующем маршрутизаторе 4, как вы можете использовать в реагирующем маршрутизаторе 3, тем не менее вы можете использовать различные способы передачи с помощью роутера или контекста, но я рекомендую использовать с роутером HOC.Вам следует использовать компонент старшего разряда withRouter и связать его с компонентом, который будет перемещаться в историю.Например:

import React from "react";
import { withRouter } from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/HOME");
  }
  ...
}
export default withRouter(MyComponent);

Answer 5

Если вы используете реагирующий маршрутизатор, вам нужно обернуть свой компонент withRouter, чтобы в него был введен реквизит истории.

import {withRouter} from 'react-router-dom';

...

export default withRouter(MyComponent);

Кроме того, все используемые вами компоненты должны быть дочерними элементами вашего маршрутизатора.компонент на верхнем уровне.