Page-relative href="#<id>" links break when using hash-based router

[stephenlrandall]

Describe the bug

When using router.type === 'hash', typical page-relative section links via href="#<id>" don't work. Instead, the full path href="#/path/to/page#<id> is required. This makes working with automated page generation tools difficult, since these kinds of links all need to be modified and prepended with the path part of $page.url.hash.

Reproduction

Compare the two "jump to..." links in https://github.com/stephenlrandall/kit-inline-test.

Logs

System Info

System:
    OS: macOS 15.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 401.48 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.8.0 - /usr/local/bin/node
    npm: 10.1.0 - /usr/local/bin/npm
    pnpm: 9.15.4 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Edge: 131.0.2903.147
    Safari: 18.2
  npmPackages:
    @sveltejs/adapter-auto: ^3.3.1 => 3.3.1 
    @sveltejs/adapter-static: ^3.0.8 => 3.0.8 
    @sveltejs/kit: ^2.15.3 => 2.15.3 
    @sveltejs/vite-plugin-svelte: ^4.0.4 => 4.0.4 
    svelte: ^5.18.0 => 5.18.0

Severity

annoyance

Additional Information

No response

[eltigerchino]

We could add the check below when retrieving link info so that relative links such as href="#about" resolve to href="#/pathname#about" by checking if href starts with #/

 try { 
 	url = new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
+	if (uses_hash_router && url.hash.match(/^#[^\/]/)) {
+		const route = location.hash.split('#')[0] || '/';
+		url.hash = `#${route}${url.hash}`;
+	}
 } catch {} 

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

Lines 131 to 133 in f451f6c

	try {
	url = new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
	} catch {}

Thoughts? @dummdidumm

[dummdidumm]

sounds sensible