title: How do people handle scroll restoration with react-router v4?
body: <p>I'm experiencing some problems with scroll positions on the back button (history popstate) when using react-router. React router v4 doesn't handle scroll management out of the box because browsers are implementing some automatic scroll behavior. This is great except when the height of the browser window changes too dramatically from one view to another. I have implemented the ScrollToTop component as described here: <a href="https://reacttraining.com/react-router/web/guides/scroll-restoration" rel="noreferrer">https://reacttraining.com/react-router/web/guides/scroll-restoration</a></p>
  
  <p>This works great. When you click a link and go to a different component, the browser scrolls to the top (like a normal server-rendered website would). The issue only happens when you go back (via the browser back button) to a view with a much taller window height. It seems that (chrome) tries to go to the scroll position of the previous page before react has rendered the content (and browser height). This results in the scroll only going as far down as it can based on the height of the view it's coming from. Picture this scenario:</p>
  
  <p><strong>View1:</strong> Long list of movies (window height 3500px).<br>
  <em>(movie is clicked)</em><br>
  <strong>View2</strong>: Details view of the selected movie (window height: 1000px).<br>
  <em>(Browser back button is clicked)</em><br>
  <strong>Back to view 1</strong>, but scroll position can't go further than 1000px, because chrome is trying to set the position before react renders the long movie list.</p>
  
  <p>For some reason this is only a problem in Chrome. Firefox and Safari seem to handle it fine. I wonder if anyone else have had this problem, and how you guys generally handle scroll restoration in React. </p>
  
  <p>Note: all the movies are imported from a sampleMovies.js — so I'm not waiting for an API response in my example.</p>