fix: Use location.pathname as asPath replacement

See #282.
47ng · Feb 23, 2022 · a141483 · a141483
1 parent f020aa6
commit a141483
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 30 deletions.
diff --git a/src/useQueryState.ts b/src/useQueryState.ts
@@ -1,7 +1,6 @@
 import { useRouter } from 'next/router'
 import React from 'react'
 import { HistoryOptions, Serializers, TransitionOptions } from './defs'
-import { getPathname } from './internal'
 
 export interface UseQueryStateOptions<T> extends Serializers<T> {
   /**
@@ -257,11 +256,6 @@ export function useQueryState<T = string>(
       } else {
         query.set(key, serialize(newValue))
       }
-
-      // Remove fragment and query from asPath
-      // router.pathname includes dynamic route keys, rather than the route itself,
-      // e.g. /views/[view] rather than /views/my-view
-      const asPath = getPathname(router.asPath)
       const search = query.toString()
       const hash = window.location.hash
       return updateUrl?.call(
@@ -272,21 +266,14 @@ export function useQueryState<T = string>(
           search
         },
         {
-          pathname: asPath,
+          pathname: window.location.pathname,
           hash,
           search
         },
         transitionOptions
       )
     },
-    [
-      key,
-      updateUrl,
-      // Add `asPath` to the dependencies, but only for the path part,
-      // otherwise as it contains the querystring, this would regenerate
-      // the state updater function on every query update.
-      getPathname(router.asPath)
-    ]
+    [key, updateUrl]
   )
   return [value ?? defaultValue ?? null, update]
 }
diff --git a/src/useQueryStates.ts b/src/useQueryStates.ts
@@ -6,7 +6,6 @@ import type {
   Serializers,
   TransitionOptions
 } from './defs'
-import { getPathname } from './internal'
 
 type KeyMapValue<Type> = Serializers<Type> & {
   defaultValue?: Type
@@ -128,11 +127,6 @@ export function useQueryStates<KeyMap extends UseQueryStatesKeysMap>(
           query.set(key, serialize(newValue))
         }
       })
-
-      // Remove fragment and query from asPath
-      // router.pathname includes dynamic route keys, rather than the route itself,
-      // e.g. /views/[view] rather than /views/my-view
-      const asPath = getPathname(router.asPath)
       const search = query.toString()
       const hash = window.location.hash
       return updateUrl?.call(
@@ -143,20 +137,13 @@ export function useQueryStates<KeyMap extends UseQueryStatesKeysMap>(
           search
         },
         {
-          pathname: asPath,
+          pathname: window.location.pathname,
           hash,
           search
         }
       )
     },
-    [
-      keys,
-      updateUrl,
-      // Add `asPath` to the dependencies, but only for the path part,
-      // otherwise as it contains the querystring, this would regenerate
-      // the state updater function on every query update.
-      getPathname(router.asPath)
-    ]
+    [keys, updateUrl]
   )
   return [values, update]
 }