React-Hot-Loader Usage on Root

App.jsx

// @flow
import React from 'react';
import { hot } from 'react-hot-loader';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

import Header from './components/Header';
import IntlProvider from './components/IntlProvider';
import Home from './screens/Home';
import About from './screens/About';
import Settings from './screens/Settings';
import User from './screens/User';
import configureStore from './configureStore';

import './App.css';

const App = () => {
  const { store, persistor } = configureStore();
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <IntlProvider>
          <Router>
            <div className="app-container">
              <Header />
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/settings" component={Settings} />
              <Route path="/user" component={User} />
            </div>
          </Router>
        </IntlProvider>
      </PersistGate>
    </Provider>
  );
};

export default hot(module)(App);