update to react-hot-loader 3 beta7 - add ScrollToTop when navigation

Author: MacKentoch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-immutable-webpack-ssr-starter",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React + React-Router + Redux + ImmutableJS + Bootstrap with with Server side rendering, Hot Reload and redux-devtools STARTER",
   "main": "src/index.js",
   "engines": {
@@ -121,7 +121,7 @@
     "react": "^15.6.1",
     "react-bootstrap": "^0.31.0",
     "react-dom": "^15.6.1",
-    "react-hot-loader": "^3.0.0-beta.6",
+    "react-hot-loader": "3.0.0-beta-7",
     "react-modal": "^1.7.7",
     "react-motion": "^0.5.0",
     "react-notification": "^6.7.0",

src/app/Root.js

@@ -13,6 +13,7 @@ import configureStore           from './redux/store/configureStore';
 import { createBrowserHistory } from 'history';
 import { fromJS }               from 'immutable';
 import App                      from './containers/app/App';
+import ScrollToTop              from './components/scrollToTop/ScrollToTop';
 
 const preloadedState  = window.__PRELOADED_STATE__;
 delete window.__PRELOADED_STATE__;
@@ -35,7 +36,9 @@ class Root extends Component {
       <Provider store={store}>
         <div>
           <Router history={syncedHistory}>
-            <App />
+            <ScrollToTop>
+              <App />
+            </ScrollToTop>
           </Router>
         </div>
       </Provider>

src/app/components/scrollToTop/ScrollToTop.js

@@ -4,15 +4,21 @@ import React, {
   PureComponent
 }                 from 'react';
 import PropTypes  from 'prop-types';
+import {
+  withRouter
+}                 from 'react-router-dom';
 
 class ScrollToTop extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
-    location: PropTypes.string
+    location: PropTypes.object
   };
 
   componentDidUpdate(prevProps) {
-    if (this.props.location !== prevProps.location) {
+    const { location: nextLocation } = this.props;
+    const { location: prevLocation } = prevProps;
+
+    if (nextLocation !== prevLocation) {
       window.scrollTo(0, 0);
     }
   }
@@ -27,4 +33,4 @@ class ScrollToTop extends PureComponent {
   }
 }
 
-export default ScrollToTop;
+export default withRouter(ScrollToTop);

src/app/containers/app/App.js

@@ -3,6 +3,7 @@
 import React, {
   PureComponent
 }                             from 'react';
+import PropTypes              from 'prop-types';
 import {
   NavigationBar,
   BackToTop
@@ -13,12 +14,19 @@ import MainRoutes             from '../../routes/MainRoutes';
 import { withRouter }         from 'react-router';
 
 class App extends PureComponent {
+  static propTypes = {
+    // react-router 4:
+    location: PropTypes.object,
+    match:    PropTypes.object
+  };
+
   state = {
     navModel : fromJS(navigationModel)
   };
 
   render() {
     const { navModel } = this.state;
+    const { match: { url } } = this.props;
 
     return (
       <div id="appContainer">

src/app/views/about/About.js

@@ -4,10 +4,14 @@ import React, {
   PureComponent
 }                     from 'react';
 import PropTypes      from 'prop-types';
+import {
+  Jumbotron
+}                     from '../../components';
 import AnimatedView   from '../../containers/animatedView/AnimatedView';
+import { Link }       from 'react-router-dom';
 
 class About extends PureComponent {
-  static propTypes= {
+  static propTypes = {
     currentView:  PropTypes.string.isRequired,
     enterAbout:   PropTypes.func.isRequired,
     leaveAbout:   PropTypes.func.isRequired
@@ -26,9 +30,20 @@ class About extends PureComponent {
   render() {
     return(
       <AnimatedView>
-        <h1>
-          About
-        </h1>
+        <Jumbotron>
+          <h1>
+            About
+          </h1>
+          <p>
+            <Link
+              className="btn btn-success btn-lg"
+              to={'/'}>
+              <i className="fa fa-info" />
+              &nbsp;
+              go to home
+            </Link>
+          </p>
+        </Jumbotron>
       </AnimatedView>
     );
   }

yarn.lock

@@ -5631,7 +5631,7 @@ react-dom@^15.6.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
-react-hot-loader@^3.0.0-beta.6:
+react-hot-loader@3.0.0-beta-7:
   version "3.0.0-beta.7"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.0.0-beta.7.tgz#d5847b8165d731c4d5b30d86d5d4716227a0fa83"
   dependencies: