import React from 'react';
import { hydrate } from 'react-dom';
import createHistory from 'history/createBrowserHistory';
import { fromJS } from 'immutable';
import { Provider } from 'react-redux';
import BrowserRouter from 'react-router-dom/BrowserRouter';
import { ScrollContext } from 'react-router-scroll-4';
import App from './containers/App';
import configureStore from './store/configureStore';

function parseState(window) {
  if (!window.__data) {
    return {};
  }
  const preloadedState = {};
  Object.keys(window.__data).forEach(key => {
    if (key === 'routing') {
      preloadedState[key] = window.__data[key];
    } else {
      preloadedState[key] = fromJS(window.__data[key]);
    }
  });
  // delete window.__data;
  return preloadedState;
}

const preloadedState = parseState(window);

const history = createHistory();
const store = configureStore(preloadedState, history);

hydrate(
  <Provider store={store}>
    <BrowserRouter>
      <ScrollContext>
        <App />
      </ScrollContext>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept('./containers/App', () => {
    hydrate(
      <Provider store={store}>
        <BrowserRouter>
          <ScrollContext>
            <App />
          </ScrollContext>
        </BrowserRouter>
      </Provider>,
      document.getElementById('root')
    );
  });
}

@@ -198,29 +198,35 @@
 %0Aimport 
-Browser
+%7B Connected
 Router
+ %7D
  from 'r
@@ -241,25 +241,13 @@
 ter-
-dom/BrowserRouter
+redux
 ';%0Ai
@@ -921,37 +921,57 @@
 tore%7D%3E%0A    %3C
-BrowserRouter
+ConnectedRouter history=%7Bhistory%7D
 %3E%0A      %3CScr
@@ -1023,31 +1023,33 @@
 text%3E%0A    %3C/
-Browser
+Connected
 Router%3E%0A  %3C/
@@ -1216,29 +1216,49 @@
        %3C
-BrowserRouter
+ConnectedRouter history=%7Bhistory%7D
 %3E%0A      
@@ -1334,23 +1334,25 @@
       %3C/
-Browser
+Connected
 Router%3E%0A

Use ConnectedRouter to bind redux history event to router (#521)