反应路由器“无法读取未定义的属性 'push'”

Question

我对反应和反应路由器还很陌生。

React 的问题在于，在我的应用程序的某些页面上，react-router 正在运行，但有些页面出现如下错误："Cannot read property 'push' of undefined".

我正在使用 React 0.14.1

我的路由代码如下所示：

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'));

我现在的组件是这样的：

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');
    }
  }

}

谁能帮我解决这个问题？谢谢

Answer 1

您的应用在其道具中没有 Router 实例，这给您 Cannot read property 'push' of undefined。

我假设您正在导入 withRouter 以获取 Router 的实例，因此如果您仍想使用它，则需要将组件包装在其中...（示例 here 但不建议）

相反，更好的编程导航方法是使用

import { hashHistory } from 'react-router;' ... hashHistory.push('/'); 在您的 componentWillMount 生命周期事件中。

文档是 here

希望对您有所帮助！

Answer 2

您正在使用 hashHistory。以下代码应该可以工作。

import { hashHistory } from 'react-router';
hashHistory.push('/');

还应该定义根路由。

<Route path="/" component={App}>

Answer 3

您可以试试下面的代码，看看您的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');
}
}

您也可以访问他们的文档以从下面获取更多信息 url https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

Answer 4

直接从 react-router 使用 hashHistory 当然是一种选择，但它会使单元测试更加痛苦。在运行中的上下文测试中，浏览器历史记录通常不可用，并且模拟 prop 比模拟全局 API.

更容易

考虑使用 react-router 提供的 withRouter 高阶组件（自 v2.4.0 起）。

import { withRouter } from 'react-router';

class App extends Component {

    (...)

}

export default withRouter(App);

您的 App class 将通过 props 接收 router，您可以安全地接收 this.props.router.push('/');。

Answer 5

如果您使用部分组件并像 <Header /> 那样调用它，那么您应该将其替换为 <Header {...this.props} />

Answer 6

添加两行。

import { withRouter } from "react-router-dom";
this.props.history.push("/welcomePage");

Answer 7

您可以从 witRouter 高阶组件访问 history 道具，并使用 push method on the history object 推送您想要的路由。

import { withRouter } from "react-router";

class App extends React.Component {

    componentWillMount() {
        ...
        this.props.history.push('/');
        ...
    }

}

export default withRouter(App);

反应路由器“无法读取未定义的属性 'push'”

react-router " Cannot read property 'push' of undefined"

javascript

reactjs

react-router

react-router-component

反应路由器“无法读取未定义的 属性 'push'”

react-router " Cannot read property 'push' of undefined"

javascript

reactjs

react-router

react-router-component

反应路由器“无法读取未定义的属性 'push'”