Need to click browser back button twice to exit page in SSR example

[alphasp]

I'm following the SSR example here:
https://github.com/reactjs/react-router-redux/blob/master/examples/server

Open http://localhost:8080, click browser back button, redux will dispatch router/LOCATION_CHANGE action, the page will remaining in same http://localhost:8080. Click browser back button again, then only the page will be close.
I noticed same issue on other community example as well such as https://github.com/svrcekmichal/universal-react

[dimooze]

Hi, i'm having the same issue.

I have tested two options :

• First one by setting the options to not keep in sync URL
• Second one, in the syncHistoryWithStore function when we check for a location in the store, by passing the condition to false and doesn't dispatch an action. I dont know if it's a good solution...

// Respect persisted location, if any if (!getLocationInStore()) { return; }

[lostpebble]

I'm having the same problem.

I think I've solved it by removing the adding and syncing of memoryHistory on the server with the store. This seems to cause problems because the server (with the temporary memoryHistory) can never know the current history of the browser accessing it.

This sounds like it defeats the point of server side rendering, but it kind of makes sense to me because the page is still rendered from the server, and nothing should be re-rendered as the current point in browserHistory (from the client side) is exactly the same as the routes that the server rendered from the temporarily created memoryHistory. So basically, history is only added and synced with the store on the client side and therefore it seems to remember all it's current forward / backward states too. Just means one extra action is shot off as soon as the client.js loads without much affect.

I'm new to this whole server rendering stuff, so maybe I'm completely wrong.

Changed code in server.js:

...
app.use(function (req, res) {
  const memoryHistory = createMemoryHistory(req.url)
  const store = configureStore(null) //this seems to insert a null value for the routing initial state, when passed into the routerMiddleware function inside

  match({ memoryHistory, routes, location: req.url }, (error, redirectLocation, renderProps) => {
...

[jackfengji]

@timdorr As @lostpebble said, removing syncHistoryWithStore does solve the issue. But is that the correct way to do?

[seap]

do not dispatch action in the first time~

  // Are we being called for the first time?
    if (!initialLocation) {
      // Remember as a fallback in case state is reset
      initialLocation = location;

      // Respect persisted location, if any
      if (getLocationInStore()) {
        return;
      }
    } else {
      // do not dispatch action in the first time
      store.dispatch({
        type: _reducer.LOCATION_CHANGE,
        payload: location
      });
    }
    // Tell the store to update by dispatching an action

[dlmr]

I have made a PR with what I believe is a fix to this problem, see #403.

If you want to try it out today you can change to the following in your package.json.

"react-router-redux": "dlmr/react-router-redux#fix-inital-server-load-dist"

[nathanvale]

thanks @dlmr - i was having this same issue. your PR fixes on my repo.

[alphasp]

thanks @dlmr for your fixes.