Javascript 反应路由器“无法读取未定义的属性“推送””
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39184049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react-router " Cannot read property 'push' of undefined"
提问by ivarni
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 正在工作，并且有些页面给出了这样的错误：“无法读取未定义的属性 'push'”。
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.
谁能帮我这个？谢谢。
采纳答案by Patrick Pei
Your app does not have an instance of Router in its props which is giving you Cannot read property 'push' of undefined.
您的应用程序的 props 中没有 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 herebut not suggested)
我假设您正在导入 withRouter 以获取路由器的实例，因此如果您仍想使用它，则需要将组件包装在其中...（此处的示例但不建议）
Instead, a better approach to programmatically navigating is to use
相反，以编程方式导航的更好方法是使用
import { hashHistory } from 'react-router;'
...
hashHistory.push('/');in your componentWillMountlifecycle event.
import { hashHistory } from 'react-router;'
...
hashHistory.push('/');在您的componentWillMount生命周期事件中。
The docs are here
文档在这里
Hope this helps!
希望这可以帮助！
回答by ivarni
Using hashHistorydirectly from react-routeris certainly an option, but it makes unit-testing a bit more painful.
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.
hashHistory直接使用fromreact-router当然是一种选择，但它使单元测试更加痛苦。浏览器历史通常在运行的上下文测试中不可用，并且模拟道具比模拟全局 API 更容易。
Consider using the withRouterhigher-order-component that react-routerprovide (since v2.4.0).
考虑使用提供（因为）withRouter的高阶组件。react-routerv2.4.0
import { withRouter } from 'react-router';
class App extends Component {
(...)
}
export default withRouter(App);
Your Appclass will receiver routervia props and you can safely do this.props.router.push('/');.
你的App班级将router通过道具接收器，你可以安全地做this.props.router.push('/');。
回答by Jitendra Suthar
If you are use Partial Component and calling it like <Header />then you should replace it by <Header {...this.props} />
如果您使用部分组件并像这样调用它，<Header />那么您应该将其替换为<Header {...this.props} />
回答by vijayst
You are using hashHistory. The following code should work.
您正在使用 hashHistory。以下代码应该可以工作。
import { hashHistory } from 'react-router';
hashHistory.push('/');
The root route should also be defined.
还应定义根路由。
<Route path="/" component={App}>
回答by Md.Estiak Ahmmed
you can try the below code see if your router propsis 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
回答by vkstream
Add two lines.
添加两行。
import { withRouter } from "react-router-dom";
this.props.history.push("/welcomePage");
