Add scroll to top on page change

Author: zoltantothcom

index.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import store from './src/store';
 import Layout from './src/Layout';
+import ScrollToTop from './src/components/ScrollToTop';
 
 const App = () => (
   <Provider store={store}>
-    <BrowserRouter>
-      <Layout />
-    </BrowserRouter>
+    <Router>
+      <ScrollToTop>
+        <Layout />
+      </ScrollToTop>
+    </Router>
   </Provider>
 );
 

src/components/ScrollToTop.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
+
+class ScrollToTop extends Component {
+  componentDidUpdate(prevProps) {
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      window.scrollTo(0, 0);
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+ScrollToTop.propTypes = {
+  location: PropTypes.object.isRequired,
+  children: PropTypes.object.isRequired
+};
+
+export default withRouter(ScrollToTop);