scroll to top

Author: chrisminnick

reactjsfoundations.com/src/ScrollToTop.js

@@ -0,0 +1,17 @@
+import React, { useEffect, Fragment } from 'react';
+import { withRouter } from 'react-router-dom';
+
+function ScrollToTop({ history, children }) {
+  useEffect(() => {
+    const unlisten = history.listen(() => {
+      window.scrollTo(0, 0);
+    });
+    return () => {
+      unlisten();
+    };
+  }, []);
+
+  return <Fragment>{children}</Fragment>;
+}
+
+export default withRouter(ScrollToTop);

reactjsfoundations.com/src/index.js

@@ -1,10 +1,14 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { BrowserRouter as Router } from "react-router-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import App from './App';
+import ScrollToTop from './ScrollToTop';
+
 ReactDOM.render(
-    <Router>
-        <App />
-    </Router>,
-  document.getElementById("root")
-);
+  <Router>
+    <ScrollToTop>
+      <App />
+    </ScrollToTop>
+  </Router>,
+  document.getElementById('root')
+);