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”。现在，如何在react-router v4中访问推送。

提前谢谢！

Answer 1

如果您使用的是React Router，则需要包装组件withRouter，以便将历史记录道具注入到您的组件中。

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

...

export default withRouter(MyComponent);

无论您使用哪种组件，都必须是顶级路由器组件的子组件。

Answer 2

默认情况下，不能像在React Router 3中使用的那样在React Router 4中使用browserHistory，但是仍然可以使用不同的方式通过withRouter或context推送，但我会建议与Router 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 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

包装您的组件withRouter以使用历史记录道具，以便您可以使用push

Answer 5

以下是应使其起作用的要求：

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';

无法在react中读取未定义的属性'push'

5 个答案: