fix: hash history link generation

Fixes #457
TanStack · Feb 6, 2023 · beb1e7b · beb1e7b
1 parent 671eaeb
commit beb1e7b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
@@ -9,6 +9,7 @@ import {
   RootRoute,
   Route,
   ErrorComponent,
+  createHashHistory,
 } from '@tanstack/react-router'
 import {
   Loader,
@@ -208,8 +209,11 @@ const routeTree = rootRoute.addChildren([
   indexRoute,
 ])
 
+const hashHistory = createHashHistory()
+
 // Set up a ReactRouter instance
 const router = new ReactRouter({
+  history: hashHistory,
   routeTree,
   defaultPreload: 'intent',
 })

diff --git a/packages/router/src/history.ts b/packages/router/src/history.ts
@@ -10,6 +10,7 @@ export interface RouterHistory {
   go: (index: number) => void
   back: () => void
   forward: () => void
+  createHref: (href: string) => string
 }
 
 export interface ParsedPath {
@@ -33,6 +34,7 @@ function createHistory(opts: {
   go: (n: number) => void
   back: () => void
   forward: () => void
+  createHref: (path: string) => string
 }): RouterHistory {
   let currentLocation = opts.getLocation()
   let unsub = () => {}
@@ -81,6 +83,7 @@ function createHistory(opts: {
       opts.forward()
       onUpdate()
     },
+    createHref: (str) => opts.createHref(str),
   }
 }
 
@@ -120,6 +123,7 @@ export function createBrowserHistory(opts?: {
     back: () => window.history.back(),
     forward: () => window.history.forward(),
     go: (n) => window.history.go(n),
+    createHref: (path) => createHref(path),
   })
 }
 
@@ -171,6 +175,7 @@ export function createMemoryHistory(
       index = Math.min(index + 1, entries.length - 1)
     },
     go: (n) => window.history.go(n),
+    createHref: (path) => path,
   })
 }
 

diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts
@@ -1163,7 +1163,7 @@ export class Router<
       searchStr,
       state: nextState,
       hash,
-      href: `${pathname}${searchStr}${hash}`,
+      href: this.history.createHref(`${pathname}${searchStr}${hash}`),
       key: dest.key,
     }
   }