- 首页
- 前端开发
- this.props.history.push 适用于某些组件而不适用于其他组件
this.props.history.push 适用于某些组件而不适用于其他组件
[英] this.props.history.push works in some components and not others
本文介绍了this.props.history.push 适用于某些组件而不适用于其他组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 browserHistory.push 以编程方式更改页面.在我的一个组件中，但不在我嵌入到该组件中的组件中.
有谁知道为什么我的项目只为子组件而不是父组件抛出下面的错误?
<块引用>
无法读取未定义的属性 'push'
父组件
import React, {Component} from 'react';从反应路由器"导入 { browserHistory };从 './ChildView' 导入 ChildView；类 ParentView 扩展组件 {构造函数(道具){超级(道具)；this.addEvent = this.addEvent.bind(this);}更改页面(){this.props.history.push("/someNewPage");}使成为() {返回 (<div><div><button onClick={this.changePage}>转到新页面！</button>
<子视图/>//这是 this.props.history.push 不起作用的子组件
);}}函数 mapStateToProps(state) {返回 {用户:state.user};}函数 matchDispatchToProps(dispatch) {返回 bindActionCreators({集合名称:集合名称}， 派遣)}导出默认连接(mapStateToProps，matchDispatchToProps)(ParentView)；
子组件
import React, {Component} from 'react';从反应路由器"导入 { browserHistory };类 ChildView 扩展组件 {构造函数(道具){超级(道具)；this.addEvent = this.addEvent.bind(this);}更改页面(){this.props.history.push("/someNewPage");}使成为() {返回 (<div><div><button onClick={this.changePage}>转到新页面！</button>
);}}函数 mapStateToProps(state) {返回 {用户:state.user};}函数 matchDispatchToProps(dispatch) {返回 bindActionCreators({集合名称:集合名称}， 派遣)}导出默认连接(mapStateToProps，matchDispatchToProps)(ChildView)；
路由器
//库从反应"导入反应；import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';从反应路由器"导入 { browserHistory };//组件从 './components/NotFound' 导入 NotFound；从 './components/ParentView' 导入 ParentView；从 './components/ChildView' 导入 ChildView；从 './components/SomeNewPage' 导入 SomeNewPage；//还原从'react-redux'导入{提供者}；从redux"导入{createStore}；从 './reducers' 导入 allReducers；常量存储 = 创建存储(所有减速机，window.devToolsExtension &&window.devToolsExtension());const 路由 = (<路由器历史={browserHistory}><div><提供者商店={商店}><开关><Route path="/" 精确组件={Home}/><Route path="/parentView" component={ParentView}/><Route path="/someNewPage" component={SomeNewPage}/><Route path="/childView" component={ChildView}/><路由组件={NotFound}/></开关></提供者>
</路由器>);导出默认路由；
如您所见，除了子组件位于父组件内部之外，组件几乎完全相同.
注意我已经尝试过这些方法，但它们并没有为我解决问题:
解决方案
您在问题中回答了您的问题.
<块引用>
如您所见，组件几乎完全相同，除了子一在父一里面.
组件进一步嵌套的事实是您的问题.React router 只将路由 props 注入到它路由到的组件中，而不会注入到嵌套在 in 中的组件中.
查看这个问题的公认答案.基本思想是，您现在需要找到一种方法将路由道具注入子组件.您可以通过将孩子包装在 HOC withRouter 中来做到这一点.
导出默认 withRouter(connect(mapStateToProps, matchDispatchToProps)(ChildView));
我希望这会有所帮助.
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.
Does anyone know why my project is throwing the error below only for the child component but not for the parent component?
Cannot read property 'push' of undefined
Parent Component
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);
Child Component
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);
Router
// 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:
解决方案
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.
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.
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));
I hope this helps.
这篇关于this.props.history.push 适用于某些组件而不适用于其他组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
