Question: Why does URL not update when used with React-Router after refresh

[newbreedofgeek]

Hello,

This is more of a question rather than a issue.

I am using this module to persist our redux store in a isomorphic react/redux app.

In our server we write out the redux initial state as a global variable (window.INITIAL_STATE) on the HTML page, and in our client side we use this to createStore.

• In our client side JS We apply the also use the persistState enhancer when we createStore.
• Right now on first load (when there is no persistent state in the in local storage), the "window.INITIAL_STATE" is used to createStore. This works fine.
• After we navigate around our app and change routes (we use React Router and React Router Redux) the full redux state is saved via the enhancer. for e.g we end up in http://app.com/users/1 and the routing state is also saved
• We then reload the page to the root http://app.com/. Everything seems to restore fine where the UI state is restored to the last router state as found in the localstorage (i.e. users/1 )
• BUT the URL does not change from http://app.com/ to http://app.com/users/1. Only the UI changes to the correct components.
• It seems as though the react-router or react-router-redux is not being able to recover the URL from localstorage. We would like the URL to also restore so it matches the UI state.
• I was wondering, I've seen that the persistState sets the state but I've not seen anywhere where state is recovered from localstorage when the store is created. Where does this happen?

Any other idea where I might be making a mistake? My code...

=======================

export default function configureStore(initialState, localStorage = true) {
  /* Middleware
   * Configure this array with the middleware that you want included. thunk
   * is included by default, and react-router-redux's syncHistory is also
   * applied if an `options.history` object was passed to configureStore.
   */
  let middleware = [
    thunk,
    routerMiddleware(browserHistory)
  ];

  // Add universal enhancers here
  let enhancers = [
    DevTools.instrument()
  ];

  // Client-side enhancers and middleware
  if (isBrowser()) {
    if (localStorage) {
      enhancers.push(persistState(persistedStates));
    }
  }

  const enhancer = compose(...[
    applyMiddleware(...middleware),
    ...enhancers
  ]);

  // create store with enhancers, middleware, reducers, and initialState
  const store = createStore(rootReducer, initialState, enhancer);

if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers').default;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}


=======================

const initialState = window.__INITIAL_STATE__;     // this gets set via isomorphic based on initial state of redux
const store = configureStore(initialState); // above configureStore called
const history = syncHistoryWithStore(browserHistory, store);

=======================

As mentioned, the UI state is correct recovered from localstorage but the URL is not updated.

Any help will be appreciated.

Thanks,