fix: various fixes around waitBeforeTransition

Author: gregberge

packages/smooth-core/package.json

@@ -65,6 +65,7 @@
     "graphql-iso-date": "^3.6.1",
     "graphql-tag": "^2.10.1",
     "graphql-tools": "^4.0.4",
+    "history": "^4.7.2",
     "humanize-string": "^1.0.2",
     "merge-deep": "^3.0.2",
     "pluralize": "^7.0.0",

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

@@ -22,7 +22,7 @@ export default function Routes() {
               {pages.map((page, index) => (
                 <Route
                   key={index}
-                  path={`${url}${page.routePath}`}
+                  path={`${url}${page.routePath}`.replace(/^\/\//, '/')}
                   render={({ history, match, location }) => (
                     <Page
                       lang={lang}

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

@@ -1,12 +1,24 @@
-import React, { useContext, useMemo } from 'react'
+import React, { useContext, useRef } from 'react'
 import { withRouter, Router } from 'react-router-dom'
+import { createLocation } from 'history'
 import HiddenHistoryContext from './HiddenHistoryContext'
 
-function HiddenLinkRouter({ history, children }) {
+// Create a local history, a mix with original history & hiddenHistory
+function useHiddenHistory(originalHistory) {
   const hiddenHistory = useContext(HiddenHistoryContext)
-  const newHistory = useMemo(() => ({ ...history }), [history])
-  newHistory.push = hiddenHistory.push
-  return <Router history={newHistory}>{children}</Router>
+  const mixedHistory = useRef({})
+  Object.assign(mixedHistory.current, originalHistory)
+  mixedHistory.current.push = hiddenHistory.push
+  mixedHistory.current.replace = hiddenHistory.replace
+  if (hiddenHistory.location) {
+    mixedHistory.current.location = createLocation(hiddenHistory.location)
+  }
+  return mixedHistory.current
+}
+
+function HiddenLinkRouter({ history, children }) {
+  const hiddenHistory = useHiddenHistory(history)
+  return <Router history={hiddenHistory}>{children}</Router>
 }
 
 export default withRouter(HiddenLinkRouter)

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

@@ -6,34 +6,32 @@ export const HiddenRouterContext = createContext()
 
 function HiddenRouter({ history, children }) {
   const hiddenHistory = useContext(HiddenHistoryContext)
-  return (
-    <div style={{ display: 'none' }}>
-      {hiddenHistory.location && (
-        <HiddenRouterContext.Provider
-          value={{
-            onPrefetched: () => {
-              switch (hiddenHistory.action) {
-                case 'PUSH':
-                  history.push(hiddenHistory.location)
-                  break
-                case 'REPLACE':
-                  history.replace(hiddenHistory.location)
-                  break
-                default:
-                  return
-              }
+  return hiddenHistory.location ? (
+    <div style={{ display: 'none' }} hidden>
+      <HiddenRouterContext.Provider
+        value={{
+          onPrefetched: () => {
+            switch (hiddenHistory.action) {
+              case 'PUSH':
+                history.push(hiddenHistory.location)
+                break
+              case 'REPLACE':
+                history.replace(hiddenHistory.location)
+                break
+              default:
+                return
+            }
 
-              hiddenHistory.push(null)
-            },
-          }}
-        >
-          <StaticRouter context={{}} location={hiddenHistory.location}>
-            {children}
-          </StaticRouter>
-        </HiddenRouterContext.Provider>
-      )}
+            hiddenHistory.push(null)
+          },
+        }}
+      >
+        <StaticRouter context={{}} location={hiddenHistory.location}>
+          {children}
+        </StaticRouter>
+      </HiddenRouterContext.Provider>
     </div>
-  )
+  ) : null
 }
 
 export default withRouter(HiddenRouter)