this.props.history.push在某些组件中起作用，而在其他组件中则不起作用 [英] this.props.history.push works in some components and not others

问题描述

我正在尝试使用 browserHistory.push 以编程方式更改页面.在我的一个组件中，而不是在我嵌入其中的一个组件中.

I am trying to programmatically change pages using browserHistory.push. In one of my components, but not in a component that I embedded inside of that one.

有人知道为什么我的项目仅向子组件而不是父组件抛出错误吗?

无法读取未定义的属性"push"

Cannot read property 'push' of undefined

父组件

import React, {Component} from 'react';
import { browserHistory } from 'react-router';
import ChildView from './ChildView';

class ParentView extends Component {

constructor(props) {
    super(props);
    this.addEvent = this.addEvent.bind(this);
  }

changePage() {
    this.props.history.push("/someNewPage");
  }

render() {
    return (
      <div>
        <div>
          <button onClick={this.changePage}>Go to a New Page!</button>
        </div>

        <ChildView />  // this is the child component where this.props.history.push doesn't work 

      </div>
    );
  }
}

function mapStateToProps(state) {
    return {
        user: state.user
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
      setName: setName
    }, dispatch)
}

export default connect(mapStateToProps, matchDispatchToProps)(ParentView);

子组件

    import React, {Component} from 'react';
    import { browserHistory } from 'react-router';

    class ChildView extends Component {

    constructor(props) {
        super(props);
        this.addEvent = this.addEvent.bind(this);
      }

    changePage() {
        this.props.history.push("/someNewPage");
      }

    render() {
        return (
          <div>
            <div>
              <button onClick={this.changePage}>Go to a New Page!</button>
            </div>

          </div>
        );
      }
    }

    function mapStateToProps(state) {
        return {
            user: state.user
        };
    }

    function matchDispatchToProps(dispatch) {
        return bindActionCreators({
          setName: setName
        }, dispatch)
    }

    export default connect(mapStateToProps, matchDispatchToProps)(ChildView);

路由器

// Libraries
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { browserHistory } from 'react-router';

// Components
import NotFound from './components/NotFound';
import ParentView from './components/ParentView';
import ChildView from './components/ChildView';
import SomeNewPage from './components/SomeNewPage';

// Redux
import { Provider } from 'react-redux';
import {createStore} from 'redux';
import allReducers from './reducers';

const store = createStore(
  allReducers,
  window.devToolsExtension && window.devToolsExtension()
);

const routes = (
    <Router history={browserHistory}>
      <div>
        <Provider store={store}>
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/parentView" component={ParentView} />
              <Route path="/someNewPage" component={SomeNewPage} />
              <Route path="/childView" component={ChildView} />
              <Route component={NotFound} />
            </Switch>
        </Provider>
      </div>
    </Router>
);

export default routes;

如您所见，除了子组件位于父组件内部之外，其他组件几乎完全相同.

As you can see, the components are virtually exactly the same except that the child one is inside the parent one.

请注意，我已经尝试了以下方法，但它们不能为我解决问题:

Note I have tried these approaches but they do not resolve the issue for me:

• 未捕获的TypeError:无法读取属性'正确导入的未定义的"push"
• React browserHistory.push给出未捕获的TypeError:无法读取未定义的属性"push"
• 以编程方式在React-Router 2中重定向到页面

推荐答案

您在问题中回答了您的问题.

You answered your question in your question.

如您所见，这些组件实际上完全相同，除了孩子的孩子在父母的孩子里面.

As you can see, the components are virtually exactly the same except that the child one is inside the parent one.

组件进一步嵌套的事实是您的问题.React Router仅将路由道具注入到它路由到的组件，而不注入到嵌套在其中的组件.

The very fact that the component is nested one further is your issue. React router only injects the routing props to the component it routed to, but not to the components nested with in.

请参见此问题的已接受答案.基本思想是，您现在需要找到一种将路由道具注入子组件的方法.您可以通过将孩子包裹在HOC withRouter 中来实现.

See the accepted answer to this question. The basic idea is that you now need to find a way to inject the routing props to the child component. You can do that by wrapping the child in a HOC withRouter.

export default withRouter(connect(mapStateToProps, matchDispatchToProps)(ChildView));

我希望这会有所帮助.

这篇关于this.props.history.push在某些组件中起作用，而在其他组件中则不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！