Merge pull request #163 from cher-ami/fix-queryparams-hash-history

Fix queryparams hash history Use history instead of window on client side Add hash history to codesandbox
cher-ami · Sep 26, 2024 · 8cff855 · 8cff855
2 parents 0d54de3 + 87f1ed9
commit 8cff855
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -3,7 +3,8 @@
   "sandboxes": [
     "/examples/example-client",
     "/examples/example-ssr",
-    "/examples/example-history-block"
+    "/examples/example-history-block",
+    "/examples/example-hash-history"
   ],
   "node": "18"
 }
diff --git a/examples/example-client/src/pages/AboutPage.tsx b/examples/example-client/src/pages/AboutPage.tsx
@@ -8,6 +8,7 @@ import {
   Router,
   useRouter,
   useStack,
+  useLang,
 } from "@cher-ami/router"
 import { transitionsHelper } from "../helper/transitionsHelper"
 import { routesList } from "../routes"
@@ -16,6 +17,8 @@ const componentName: string = "AboutPage"
 
 const AboutPage = forwardRef((props, handleRef: ForwardedRef<any>) => {
   const rootRef = useRef(null)
+  const [lang] = useLang()
+  const { currentRoute } = useRouter()
 
   useStack({
     componentName,
@@ -31,8 +34,15 @@ const AboutPage = forwardRef((props, handleRef: ForwardedRef<any>) => {
 
   return (
     <div className={componentName} ref={rootRef}>
-      {componentName}
-
+      <h1>
+        {componentName} - {lang.key}
+      </h1>
+      Query Params :
+      <ul>
+        <li>Foo : {currentRoute.queryParams?.foo} </li>
+        <li>Zoo : {currentRoute.queryParams?.zoo} </li>
+      </ul>
+      Children :
       <Router
         id={4}
         base={getSubRouterBase(path, router.base, true)}

diff --git a/src/components/Router.tsx b/src/components/Router.tsx
@@ -398,9 +398,10 @@ function Router(
         return
         // client
       } else if (history) {
-        let url = window.location.pathname + window.location.search + window.location.hash
+        let url =
+          history.location.pathname + history.location.search + history.location.hash
         if (props.isHashHistory) {
-          url = history.location.pathname + window.location.search
+          url = history.location.pathname + history.location.search
         }
         handleHistory(url)
 

diff --git a/src/tests/core.getRouteFromUrl.test.ts b/src/tests/core.getRouteFromUrl.test.ts
@@ -114,27 +114,37 @@ describe("getRouteFromUrl", () => {
         children: [{ path: "/c" }, { path: "/d" }],
       },
     ]
-    // only params
+
+    // params
     let getRoute = getRouteFromUrl({
       pRoutes,
       pUrl: "/b?foo=bar&lang=en",
       isHashHistory: true,
     })
+
     expect(getRoute.queryParams).toEqual({ foo: "bar", lang: "en" })
     expect(getRoute._fullPath).toEqual("/b")
 
-    // only hash
-    getRoute = getRouteFromUrl({ pRoutes, pUrl: "/b/c", isHashHistory: true })
-    expect(getRoute._fullPath).toEqual("/b/c")
-    expect(getRoute.hash).toEqual(null)
-
-    // params and hash
-    getRoute = getRouteFromUrl({ pRoutes, pUrl: "/b/c?foo=bar", isHashHistory: true })
-    expect(getRoute.queryParams).toEqual({ foo: "bar" })
-
-    // not hash and params
+    // no params
     getRoute = getRouteFromUrl({ pRoutes, pUrl: "/a", isHashHistory: true })
     expect(getRoute.queryParams).toEqual({})
-    expect(getRoute.hash).toEqual(null)
+
+    // Subroutes
+    getRoute = getRouteFromUrl({
+      pRoutes,
+      pUrl: "/b/c",
+      isHashHistory: true,
+    })
+    expect(getRoute._fullPath).toEqual("/b/c")
+    expect(getRoute.queryParams).toEqual({})
+
+    // Subroutes with params
+    getRoute = getRouteFromUrl({
+      pRoutes,
+      pUrl: "/b/c?foo=bar&lang=en",
+      isHashHistory: true,
+    })
+    expect(getRoute._fullPath).toEqual("/b/c")
+    expect(getRoute.queryParams).toEqual({ foo: "bar", lang: "en" })
   })
 })