[英]react-router " Cannot read property 'push' of undefined"
i am quite new to react and react-router.我对反应和反应路由器很陌生。
Problem with react is here that, on some pages of my application react-router is working and some giving error like this: "Cannot read property 'push' of undefined". react 的问题就在这里,在我的应用程序的某些页面上,react-router 正在工作,有些页面给出了这样的错误:“无法读取未定义的属性‘推送’”。
i am using react 0.14.1我正在使用反应 0.14.1
My routing code looks like this:我的路由代码如下所示:
render(
<Router history={hashHistory}>
<Route path="/" component={Loginpanel}/>
<Route path="Index" component={Index}/>
<Route path="Form" component={Form} />
<Route path="Checkindex" component={Index}/>
<Route path="Signup" component={Signup}/>
<Route path="Admin" component={Admin}/>
<Route path="AdminEditDetails" component={AdminEditDetails}/>
<Route path="AdminDetails" component={AdminDetails}/>
</Router>,
document.getElementById('js-main'));
My component is like this now:我的组件现在是这样的:
class App extends React.Component {
constructor(props) {
super(props);
this.state= {
comments: AppStore.getAll();
};
}
componentWillMount() {
var length = this.state.comments.length;
var firstnumber = length - 4;
if(length == 0){
console.log("here comes");
this.props.router.push('/');
}
else{
console.log('work normally');
}
}
}
Can anyone help me with this?谁能帮我这个? Thanks.
谢谢。
Using hashHistory
directly from react-router
is certainly an option, but it makes unit-testing a bit more painful.直接从
react-router
使用hashHistory
当然是一种选择,但它使单元测试更加痛苦。 Browser history will generally not be available in the context tests run in and it's easier to mock out a prop than to mock out a global API.浏览器历史通常在运行的上下文测试中不可用,并且模拟道具比模拟全局 API 更容易。
Consider using the withRouter
higher-order-component that react-router
provide (since v2.4.0
).考虑使用
react-router
提供的withRouter
高阶组件(自v2.4.0
)。
import { withRouter } from 'react-router';
class App extends Component {
(...)
}
export default withRouter(App);
Your App
class will receiver router
via props and you can safely do this.props.router.push('/');
您的
App
类将通过 props 接收router
,您可以安全地执行this.props.router.push('/');
. .
如果你使用 Partial Component 并像<Header />
一样调用它,那么你应该用<Header {...this.props} />
替换它
Your app does not have an instance of Router in its props which is giving you Cannot read property 'push' of undefined
.您的应用程序在其道具中没有 Router 实例,这使您
Cannot read property 'push' of undefined
。
I'm assuming you're importing withRouter to get the instance of the Router so you'd need to wrap the component in that if you still want to use that... (example here but not suggested)我假设您正在导入 withRouter 以获取路由器的实例,因此如果您仍想使用它,则需要将组件包装在其中...( 此处的示例但不建议)
Instead, a better approach to programmatically navigating is to use相反,以编程方式导航的更好方法是使用
import { hashHistory } from 'react-router;' ... hashHistory.push('/');
in your componentWillMount
lifecycle event.在您的
componentWillMount
生命周期事件中。
Hope this helps!希望这有帮助!
You are using hashHistory.您正在使用 hashHistory。 The following code should work.
以下代码应该可以工作。
import { hashHistory } from 'react-router';
hashHistory.push('/');
The root route should also be defined.还应定义根路由。
<Route path="/" component={App}>
you can try the below code see if your router props
is working or not你可以试试下面的代码看看你的
router props
是否工作
componentWillMount() {
var length = this.state.comments.length;
var firstnumber = length - 4;
if(length == 0){
console.log("here comes");
if(this.props.router !== undefined) {
this.props.router.push('/');
} else {
console.log(this.props.router);
}
}
else{
console.log('work normally');
}
}
also you can visit their documentation to get more information from below url https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md您也可以访问他们的文档以从以下网址获取更多信息https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md
You can get access to the history
prop from witRouter
higher order component, and use the push method on the history
object to push the route you want to.您可以从
witRouter
高阶组件访问history
prop,并使用history
对象上的push 方法来推送您想要的路由。
import { withRouter } from "react-router";
class App extends React.Component {
componentWillMount() {
...
this.props.history.push('/');
...
}
}
export default withRouter(App);
Add two lines.添加两行。
import { withRouter } from "react-router-dom";
this.props.history.push("/welcomePage");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.