react-router Cannot read property 'push' of undefined

Question

I'm using react-router to navigate to a certain page after logging in through my REST api.

Here's the sample of my codes, tried this:

export default {
  loginUser: (jwt, rememberMe) => {
  var savedJwt = localStorage.getItem('jwt');

  AppDispatcher.dispatch({
    actionType: 'LOGIN_USER',
    jwt: jwt
  });

  if (savedJwt !== jwt) {
    browserHistory.push('/');
    localStorage.setItem('jwt', jwt);
  }
},

And this based on react-router tutorial.

export default {
  loginUser: (jwt, rememberMe) => {
  var savedJwt = localStorage.getItem('jwt');

  contextTypes: {
      router: React.PropTypes.object
  }

  AppDispatcher.dispatch({
    actionType: 'LOGIN_USER',
    jwt: jwt
  });

  if (savedJwt !== jwt) {
    this.context.router.push('/')
    localStorage.setItem('jwt', jwt);
  }
},

However, both are not working. First one complaining about "Error logging in TypeError: Cannot read property 'push' of undefined", while second one complaining about "Error logging in TypeError: Cannot read property 'context' of undefined".

Can anyone help me up with this? Been stuck here for hours. Thanks!

Answer 1

calling this.context.router.push('/') will not work for whatever reason. However the url changes when using browserHistory.push('/') . At this point if you refresh the page it should change pages. Based on what I have read so far however, I don't know that using react router to load another page from your server is the best way to go though.

Answer 2

Turns out browserHistory.push('/'); is working fine. The reason for the failing is due to incorrect react-router libraries.