scroll to top on route change

moflo · Sep 27, 2018 · af7b205 · af7b205
1 parent 6467738
commit af7b205
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/src/views/App.js b/src/views/App.js
@@ -15,6 +15,7 @@ const App = () => (
     <BrowserRouter>
       <ErrorBoundary>
         <Layout>
+          <Route path="/" component={ScrollToTop}/>
           <Route path="/" component={Analytics}/>
           <Routes />
         </Layout>
@@ -23,6 +24,19 @@ const App = () => (
   </FirestoreProvider>
 )
 
+// scroll to top on route change
+// https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md#scroll-to-top
+class ScrollToTop extends React.Component {
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      window.scrollTo(0, 0)
+    }
+  }
+  render() {
+    return null
+  }
+}
+
 // Track Google Analytics page view for every route
 // https://github.com/react-ga/react-ga/issues/122#issuecomment-319546248
 const Analytics = ({location}) => {