How to scroll to the top when changing pages with React Router

This is a dead-simple way to make React Router scroll to the top of the page when the page changes:

  1. Create a ScrollToTop component that scrolls to the top of the window on update. Wrap its export in withRouter.

    import React, { Component } from "react";
    import { withRouter } from "react-router-dom";
    
    class ScrollToTop extends Component {
    	componentDidUpdate(prevProps) {
    		if (this.props.location !== prevProps.location) {
    			window.scrollTo(0, 0);
    		}
    	}
    
    	render() {
    		return <React.Fragment />
    	}
    }
    
    export default withRouter(ScrollToTop)
    
  2. Add this component to a high-level layout under your Router component.

    const MainLayout = () => (
    	<Router>
    		<ScrollToTop />
    		<OtherAppContents />
    	</Router>
    );
    

Now when you change routes, React Router will update ScrollToTop. This makes the browser scroll to the top of the window, simulating a real page change. Hope this helped!

Mark @mtmdev_