fix(hash): only pushState the hash part

posva · posva · commit 2a14c19e4f03 · 2020-09-26T17:38:57.000+02:00
Fix #495
diff --git a/__tests__/history/hash.spec.ts b/__tests__/history/hash.spec.ts
@@ -101,7 +101,7 @@ describe('History Hash', () => {
     it('should use a correct base', () => {
       createWebHashHistory()
       // both, a trailing / and none work
-      expect(createWebHistory).toHaveBeenCalledWith('/usr/some-file.html#')
+      expect(createWebHistory).toHaveBeenCalledWith('#')
     })
   })
 })
diff --git a/__tests__/history/html5.spec.ts b/__tests__/history/html5.spec.ts
@@ -93,15 +93,28 @@ describe('History HTMl5', () => {
     spy.mockRestore()
   })
 
-  it('works with file:/// urls and a base', () => {
+  it('calls push with hash part of the url with a base', () => {
     dom.reconfigure({ url: 'file:///usr/etc/index.html' })
     let history = createWebHistory('/usr/etc/index.html#/')
     let spy = jest.spyOn(window.history, 'pushState')
     history.push('/foo')
     expect(spy).toHaveBeenCalledWith(
       expect.anything(),
       expect.any(String),
-      'file:///usr/etc/index.html#/foo'
+      '#/foo'
+    )
+    spy.mockRestore()
+  })
+
+  it('works with something after the hash in the base', () => {
+    dom.reconfigure({ url: 'file:///usr/etc/index.html' })
+    let history = createWebHistory('#something')
+    let spy = jest.spyOn(window.history, 'pushState')
+    history.push('/foo')
+    expect(spy).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.any(String),
+      '#something/foo'
     )
     spy.mockRestore()
   })
diff --git a/src/history/hash.ts b/src/history/hash.ts
@@ -29,7 +29,7 @@ export function createWebHashHistory(base?: string): RouterHistory {
   // Make sure this implementation is fine in terms of encoding, specially for IE11
   // for `file://`, directly use the pathname and ignore the base
   // location.pathname contains an initial `/` even at the root: `https://example.com`
-  base = location.host ? base || location.pathname : location.pathname
+  base = location.host ? base || location.pathname : ''
   // allow the user to provide a `#` in the middle: `/base/#/app`
   if (base.indexOf('#') < 0) base += '#'
 
diff --git a/src/history/html5.ts b/src/history/html5.ts
@@ -202,13 +202,12 @@ function useHistoryStateNavigation(base: string) {
     state: StateEntry,
     replace: boolean
   ): void {
+    // when the base has a `#`, only use that for the URL
+    const hashIndex = base.indexOf('#')
     const url =
-      createBaseLocation() +
-      // preserve any existing query when base has a hash
-      (base.indexOf('#') > -1 && location.search
-        ? location.pathname + location.search + '#'
-        : base) +
-      to
+      hashIndex > -1
+        ? base.slice(hashIndex) + to
+        : createBaseLocation() + base + to
     try {
       // BROWSER QUIRK
       // NOTE: Safari throws a SecurityError when calling this function 100 times in 30 seconds
