React-redux-starter-kit: browserHistory.push(...) only change the location but doesn't update

Created on 28 Jun 2016  路  8Comments  路  Source: davezuko/react-redux-starter-kit

If I navigate directly to /my-path it works but I need go programmatically

so I'm using the following

import { browserHistory } from 'react-router'
...
browserHistory.push('/my-path')

the url change but nothing is updated

Most helpful comment

@bharadwajag I solved it by using push from react-router-redux:

sagas.js

import { push } from 'react-router-redux'
// ...
yield put(push('/login'));

On an unrelated note, I see you're storing the token in local storage. A more secure approach is to store it in httponly secure cookie, you might want to check that out.

All 8 comments

Since this is a redux project, it's recommended that you dispatch actions via react-router-redux if you wish to change the route programmatically.

See: https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions

@davezuko thanks I was asking this method because I saw enable syncHistoryWithStore and in a previous version of this starter-kit I did it in that way. thanks in advance I'll take the dispatch approach

Did the dispatch approach solve your problem? I have the same problem and tried the two approaches. Neither of them worked.

+1

@areshand dispatch did solve my problem.

Beside using push from react-router-redux you also need to add a middleware to your redux store (see https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions).

@davezuko
What if we're trying to do this in a saga? The store was already created elsewhere and passed in a Provider, but how would we access it inside of a saga? Or is there another best practice for redirecting in a saga? Thanks.

@davezuko
I'm also facing the same issues, I'm not able to redirect to dashboard page after login, inside saga file.
Here is what I'm doing,

import { browserHistory } from 'react-router'

export function* login(requestObj) {

    // After successfully login

    if (response.ResponseId !== -1) {
      // Save token to local storage
      localStorage.authToken = response.MultipleResults[0].TokenId;
      yield put(loginSuccess(response));
      forwardTo('/dashboard'); // Go to Products page
    } 
  }
}

// My helper method
function forwardTo(location) {
   browserHistory.push(location);
}

URL is updating but still in login page not redirecting to dashboard page.

@martinjuhasz Where we need to apply middlewares is there any example code can you provide that might helpful.

@bharadwajag I solved it by using push from react-router-redux:

sagas.js

import { push } from 'react-router-redux'
// ...
yield put(push('/login'));

On an unrelated note, I see you're storing the token in local storage. A more secure approach is to store it in httponly secure cookie, you might want to check that out.

Was this page helpful?
0 / 5 - 0 ratings