fix: correctly handle relative anchors when hash router is enabled (#…

…13356)

fixes #13320

This PR enables relative hash links to be used with the hash router so that links such as #example get recognised as a link to the current page. We do this by assuming links that have a hash value starting with #/ links to a route while anything else is probably linking to an element with an id on the current page.

.changeset/forty-houses-collect.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: correctly handle relative anchors when using the hash router

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

@@ -130,6 +130,12 @@ export function get_link_info(a, base, uses_hash_router) {
 
 	try {
 		url = new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
+
+		// if the hash doesn't start with `#/` then it's probably linking to an id on the current page
+		if (uses_hash_router && url.hash.match(/^#[^/]/)) {
+			const route = location.hash.split('#')[1] || '/';
+			url.hash = `#${route}${url.hash}`;
+		}
 	} catch {}
 
 	const target = a instanceof SVGAElement ? a.target.baseVal : a.target;

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

@@ -0,0 +1,3 @@
+<a href="#test">go to #test</a>
+
+<p id="test">#test</p>

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

@@ -89,4 +89,13 @@ test.describe('hash based navigation', () => {
 		url = new URL(page.url());
 		expect(url.hash).toBe('#/reroute-b');
 	});
+
+	test('relative anchor works', async ({ page }) => {
+		await page.goto('/#/anchor');
+
+		await page.locator('a[href="#test"]').click();
+		await expect(page.locator('#test')).toHaveText('#test');
+		const url = new URL(page.url());
+		expect(url.hash).toBe('#/anchor#test');
+	});
 });