Switch to react-router-scroll instead of scroll-behaviour

tinkusam · May 15, 2016 · dbae366 · dbae366
1 parent 5c349c6
commit dbae366
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git a/app/app.js b/app/app.js
@@ -17,10 +17,10 @@ import 'file?name=[name].[ext]!./.htaccess';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Router, browserHistory } from 'react-router';
+import { applyRouterMiddleware, Router, browserHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
 import FontFaceObserver from 'fontfaceobserver';
-import useScroll from 'scroll-behavior/lib/useScrollToTop';
+import useScroll from 'react-router-scroll';
 import configureStore from './store';
 
 // Observe loading of Open Sans (to remove open sans, remove the <link> tag in
@@ -60,7 +60,27 @@ const rootRoute = {
 
 ReactDOM.render(
   <Provider store={store}>
-    <Router history={useScroll(() => history)()} routes={rootRoute} />
+    <Router
+      history={history}
+      routes={rootRoute}
+      render={
+        // Scroll to top when going to a new page, imitating default browser
+        // behaviour
+        applyRouterMiddleware(
+          useScroll(
+            (prevProps, props) => {
+              if (!prevProps || !props) {
+                return true;
+              }
+              if (prevProps.location.pathname !== props.location.pathname) {
+                return [0, 0];
+              }
+              return true;
+            }
+          )
+        )
+      }
+    />
   </Provider>,
   document.getElementById('app')
 );

diff --git a/internals/templates/app.js b/internals/templates/app.js
@@ -15,9 +15,9 @@ import 'file?name=[name].[ext]!./.htaccess';      // eslint-disable-line import/
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Router, browserHistory } from 'react-router';
+import { applyRouterMiddleware, Router, browserHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
-import useScroll from 'scroll-behavior/lib/useScrollToTop';
+import useScroll from 'react-router-scroll';
 import configureStore from './store';
 
 // Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
@@ -48,7 +48,27 @@ const rootRoute = {
 
 ReactDOM.render(
   <Provider store={store}>
-    <Router history={useScroll(() => history)()} routes={rootRoute} />
+    <Router
+      history={history}
+      routes={rootRoute}
+      render={
+        // Scroll to top when going to a new page, imitating default browser
+        // behaviour
+        applyRouterMiddleware(
+          useScroll(
+            (prevProps, props) => {
+              if (!prevProps || !props) {
+                return true;
+              }
+              if (prevProps.location.pathname !== props.location.pathname) {
+                return [0, 0];
+              }
+              return true;
+            }
+          )
+        )
+      }
+    />
   </Provider>,
   document.getElementById('app')
 );

diff --git a/package.json b/package.json
@@ -130,12 +130,12 @@
     "react-redux": "^4.4.5",
     "react-router": "^2.3.0",
     "react-router-redux": "^4.0.4",
+    "react-router-scroll": "^0.2.0",
     "redux": "^3.5.2",
     "redux-immutable": "^3.0.6",
     "redux-saga": "^0.10.0",
     "reselect": "^2.5.1",
     "sanitize.css": "^3.3.0",
-    "scroll-behavior": "^0.4.0",
     "whatwg-fetch": "^0.11.0"
   },
   "devDependencies": {