fix: ensure hash router back/forward navigation works (#13492)

- ensure modifying the hash manually results in a reload, which also aligns with the pathname behavior. Fixes #13322
- since we now handle hash manipulation reloads, we can remove code elsewhere that was supposed to handle this but introduced bugs with back/forward navigation. Fixes #13460

Author: stephenlrandall

.changeset/angry-peaches-beam.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: correct navigation history with hash router and ensure load functions are rerun on user changes to URL hash

packages/kit/src/runtime/client/client.js

@@ -2435,6 +2435,12 @@ function _start_router() {
 			if (!hash_navigating) {
 				const url = new URL(location.href);
 				update_url(url);
+
+				// if the user edits the hash via the browser URL bar, trigger a full-page
+				// reload to align with pathname router behavior
+				if (app.hash) {
+					location.reload();
+				}
 			}
 		}
 	});
@@ -2453,13 +2459,6 @@ function _start_router() {
 				'',
 				location.href
 			);
-		} else if (app.hash) {
-			// If the user edits the hash via the browser URL bar, it
-			// (surprisingly!) mutates `current.url`, allowing us to
-			// detect it and trigger a navigation
-			if (current.url.hash === location.hash) {
-				void navigate({ type: 'goto', url: decode_hash(current.url) });
-			}
 		}
 	});
 

packages/kit/test/apps/hash-based-routing/src/routes/+layout.svelte

@@ -9,6 +9,7 @@
 
 <a href="/">/</a>
 <a href="/#/a">/#/a</a>
+<a href="/#/b">/#/b</a>
 <a href="/#/a#b">/#/a#b</a>
 <a href="/#/b/123">/#/b/123</a>
 <a href="/#/b/456">/#/b/456</a>

packages/kit/test/apps/hash-based-routing/test/test.js

@@ -99,4 +99,20 @@ test.describe('hash based navigation', () => {
 		const url = new URL(page.url());
 		expect(url.hash).toBe('#/anchor#test');
 	});
+
+	test('navigation history works', async ({ page }) => {
+		await page.goto('/');
+
+		await page.locator('a[href="/#/a"]').click();
+		await page.waitForURL('/#/a');
+
+		await page.locator('a[href="/#/b"]').click();
+		await page.waitForURL('/#/b');
+
+		await page.goBack();
+		expect(page.locator('p')).toHaveText('a');
+
+		await page.goForward();
+		expect(page.locator('p')).toHaveText('b');
+	});
 });