ManageScroll.js

import React from "react";
import { Location } from "@reach/router";

let scrollPositions = {};

class ManageScrollImpl extends React.Component {
  componentDidMount() {
    let storage = sessionStorage.getItem("scrollPositions");
    if (storage) {
      scrollPositions = JSON.parse(storage);
      let { key } = this.props.location;
      if (scrollPositions[key]) {
        window.scrollTo(0, scrollPositions[key]);
      }
    }
    window.addEventListener("scroll", this.listener);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.listener);
  }

  componentDidUpdate() {
    const { key } = this.props.location;
    if (!scrollPositions[key]) {
      // never seen this location before
      window.scrollTo(0, 0);
    } else {
      // seen it
      window.scrollTo(0, scrollPositions[key]);
    }
  }

  listener = () => {
    scrollPositions[this.props.location.key] = window.scrollY;
    sessionStorage.setItem("scrollPositions", JSON.stringify(scrollPositions));
  };

  render() {
    return null;
  }
}

export default () => (
  <Location>
    {({ location }) => <ManageScrollImpl location={location} />}
  </Location>
);