feat: add ScrollToTop

Author: gregberge

packages/smooth-core/src/client/Routes.js

@@ -3,48 +3,51 @@ import { Switch, Route } from 'react-router-dom'
 import Page, { getPages } from './Page'
 import HiddenRouter from '../router/HiddenRouter'
 import { Provider as HiddenHistoryContextProvider } from '../router/HiddenHistoryContext'
+import ScrollToTop from '../router/ScrollToTop'
 
 const pages = getPages()
 
 export default function Routes() {
   return (
     <HiddenHistoryContextProvider>
-      <Route
-        path="/:lang(.{2})?"
-        render={({
-          match: {
-            url,
-            params: { lang = null },
-          },
-        }) => {
-          const routes = (
-            <Switch>
-              {pages.map((page, index) => (
-                <Route
-                  key={index}
-                  path={`${url}${page.routePath}`.replace(/^\/\//, '/')}
-                  render={({ history, match, location }) => (
-                    <Page
-                      lang={lang}
-                      indexUrl={`${url}${page.indexPath}`}
-                      page={page}
-                      history={history}
-                      match={match}
-                      location={location}
-                    />
-                  )}
-                />
-              ))}
-            </Switch>
-          )
-          return (
-            <>
-              {routes}
-              <HiddenRouter>{routes}</HiddenRouter>
-            </>
-          )
-        }}
-      />
+      <ScrollToTop>
+        <Route
+          path="/:lang(.{2})?"
+          render={({
+            match: {
+              url,
+              params: { lang = null },
+            },
+          }) => {
+            const routes = (
+              <Switch>
+                {pages.map((page, index) => (
+                  <Route
+                    key={index}
+                    path={`${url}${page.routePath}`.replace(/^\/\//, '/')}
+                    render={({ history, match, location }) => (
+                      <Page
+                        lang={lang}
+                        indexUrl={`${url}${page.indexPath}`}
+                        page={page}
+                        history={history}
+                        match={match}
+                        location={location}
+                      />
+                    )}
+                  />
+                ))}
+              </Switch>
+            )
+            return (
+              <>
+                {routes}
+                <HiddenRouter>{routes}</HiddenRouter>
+              </>
+            )
+          }}
+        />
+      </ScrollToTop>
     </HiddenHistoryContextProvider>
   )
 }

packages/smooth-core/src/router/ScrollToTop.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react'
+import { withRouter } from 'react-router-dom'
+
+function ScrollToTop({ children, location }) {
+  const previousLocation = useRef()
+  useEffect(() => {
+    if (
+      previousLocation.current &&
+      previousLocation.current.pathname !== location.pathname
+    ) {
+      // eslint-disable-next-line
+      window.scrollTo(0, 0)
+    }
+    previousLocation.current = location.pathname
+  }, [location.pathname])
+  return children
+}
+
+export default withRouter(ScrollToTop)