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

Question

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".

i am using react 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.

Answer 1

Using hashHistory directly from react-router is 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.

Consider using the withRouter higher-order-component that react-router provide (since 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('/');.