title: React Router ScrollToTop not working with Material UI
body: <p>I'm using Material UI for a fairly simple website but I'm having trouble with ScrollToTop. I've followed the documentation but can't seem to find the issue with my code. The desired functionality is every time a link is clicked, the page loads at the top. Instead, when clicked, the page changes but is rendered in the same position as the previous. See below - I've simplified the code so you aren't blasted with a wall of text.</p>
  
  <p>Documentation referenced: <a href="https://reacttraining.com/react-router/web/guides/scroll-restoration" rel="nofollow noreferrer">https://reacttraining.com/react-router/web/guides/scroll-restoration</a></p>
  
  <p>Root Component</p>
  
  <pre><code>const homePage = () =&gt; (&lt;Home /&gt;);
  const helpPage = () =&gt; (&lt;Help /&gt;);
  const termsPage = () =&gt; (&lt;Markdown&gt;{terms}&lt;/Markdown&gt;);
  const privacyPage = () =&gt; (&lt;Markdown&gt;{privacy}&lt;/Markdown&gt;);
  
  class Header extends React.Component {
  
    componentDidUpdate(prevProps) {
      if (this.props.location !== prevProps.location) {
        window.scrollTo(0, 0);
      }
    }
  
    render() {
      return (
        &lt;MuiThemeProvider theme={darkTheme}&gt;
          &lt;div className={classes.root}&gt;
            &lt;AppBar position="absolute" className={classes.appBar}&gt;
              &lt;Toolbar&gt;
                &lt;Link className={classes.link} to="/"&gt;&lt;Typography&gt;Home&lt;/Typography&gt;&lt;/Link&gt;
                &lt;Link className={classes.link} to="/help"&gt;&lt;Typography&gt;Help&lt;/Typography&gt;&lt;/Link&gt;
                &lt;IconButton onClick={this.props.logOut} className={classes.headerIcon}&gt;
                  &lt;AccountCircleIcon /&gt;
                &lt;/IconButton&gt;
              &lt;/Toolbar&gt;
            &lt;/AppBar&gt;
            &lt;main className={classes.content}&gt;
              &lt;div className={classes.toolbar} /&gt;
              &lt;Route exact path="/" component={homePage} /&gt;
              &lt;Route path="/help" component={helpPage} /&gt;
              &lt;Route path="/terms" component={termsPage} /&gt;
              &lt;Route path="/privacy" component={privacyPage} /&gt;
              &lt;Footer /&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        &lt;/MuiThemeProvider&gt;
      );
    }
  }
  </code></pre>