this.props.history.push在某些组件中工作，而在其他组件中不工作。
this.props.history.push在某些组件中工作，而在其他组件中不工作。
提问于 2017-05-07 22:05:21
我正在尝试使用browserHistory.push以编程方式更改页面。在我的一个组件中，而不是在我嵌入其中的组件中。
有人知道为什么我的项目只为子组件而不是父组件抛出错误吗？
无法读取未定义的属性“push”
父组件
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;正如您所看到的，这些组件实际上完全相同，只是子组件在父组件中。
注意:我尝试过这些方法，但它们并没有为我解决问题：
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-05-07 22:25:26
你在问题中回答了你的问题。
正如您所看到的，这些组件实际上完全相同，只是子组件在父组件中。
组件是嵌套的这一事实本身就是您的问题。React路由器只将路由支持注入到它所路由到的组件，而不注入嵌套在in中的组件。
请参阅对this问题的公认答案。基本思想是，您现在需要找到一种将路由支持注入子组件的方法。您可以通过在一个特殊的withRouter中包装子程序来做到这一点。
export default withRouter(connect(mapStateToProps, matchDispatchToProps)(ChildView));我希望这能帮到你。
Stack Overflow用户
发布于 2018-03-01 02:09:53
使用withRouter很好，另一种选择是将历史记录从父级传递到子级(不使用withRouter)，例如：
亲本
<SignupForm history={this.props.history}/>儿童
this.props.history.push('/dashboard');Stack Overflow用户
发布于 2020-02-24 12:52:39
你可以试试这个
this.context.history.push('/dashboard')或者将历史记录从父组件传递到子组件，如
亲本
<SignupForm history={this.props.history}/>儿童
this.props.history.push('/dashboard');或withRouter
import { withRouter } from "react-router";
export default withRouter(connect(mapStateToProps, {
...
})(Header));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43837212
复制相关文章
相似问题
腾讯云开发者
