Scroll to top on route change

src/components/layout/Default.js

@@ -1,9 +1,11 @@
 // @flow
 
 import React, { Fragment, Component } from 'react'
+import { compose } from 'redux'
 import styled from 'styled-components'
-import { Route } from 'react-router'
+import { Route, withRouter } from 'react-router'
 import { translate } from 'react-i18next'
+import type { Location } from 'react-router'
 
 import * as modals from 'components/modals'
 import Box from 'components/base/Box'
@@ -25,11 +27,21 @@ const Container = styled(GrowScroll).attrs({
   padding-top: ${p => p.theme.sizes.topBarHeight + p.theme.space[7]}px;
 `
 
-class Default extends Component<{}> {
+type Props = {
+  location: Location,
+}
+
+class Default extends Component<Props> {
   componentDidMount() {
     window.requestAnimationFrame(() => (this._timeout = setTimeout(() => window.onAppReady(), 300)))
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      this._scrollContainer._scrollbar.scrollTo(0, 0)
+    }
+  }
+
   componentWillUnmount() {
     clearTimeout(this._timeout)
   }
@@ -52,7 +64,7 @@ class Default extends Component<{}> {
             <Box shrink grow bg="cream" color="grey" relative>
               <TopBar />
               <UpdateNotifier />
-              <Container>
+              <Container innerRef={n => (this._scrollContainer = n)}>
                 <Route path="/" exact component={DashboardPage} />
                 <Route path="/settings" component={SettingsPage} />
                 <Route path="/account/:id" component={AccountPage} />
@@ -65,4 +77,4 @@ class Default extends Component<{}> {
   }
 }
 
-export default translate()(Default)
+export default compose(withRouter, translate())(Default)