clicking hash link recorded in history twice

[kyontan]

Describe the bug

When opening #anchor-a then click a link to #anchor-b, history newly records entries #anchor-a and #anchor-b though #anchor-a is previous location.

Therefore, hisotry looks like:

#anchor-a (initial view)
#anchor-b
#anchor-b (when clicked #anchor-b)
#anchor-c
#anchor-c (when clicked #anchor-c)
#anchor-d
#anchor-d (when clicked #anchor-d)
...

Disabling router by export const router = false; mitigate this issue, so that I think router has some issue around this.

Reproduction

https://stackblitz.com/edit/sveltekit-ivmzya?devtoolsheight=33&file=src/routes/index.svelte

Easily understand by following steps:

1. Open in New Window in Stackblitz
2. Clicking anchor links some times
3. Check a browser history, looks like:

(Also I notified null is oddly appealing on first clicking #anchor-b)

Logs

No response

System Info

# npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite}"
  System:
    OS: macOS 11.4
    CPU: (8) x64 Apple M1
    Memory: 24.88 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.17 - ~/.nodebrew/current/bin/yarn
    npm: 8.1.2 - ~/.nodebrew/current/bin/npm
  Browsers:
    Firefox: 95.0
    Safari: 14.1.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.17
    @sveltejs/kit: next => 1.0.0-next.251
    svelte: ^3.46.3 => 3.46.3

### Severity

blocking an upgrade

### Additional Information

_No response_

[kyontan]

I think replacing <a href="#anchor">...</a> with <a on:click={() => goto("#anchor")}>...</a> could workaround this.

[Glench]

Maybe related to #3621?

[bluwy]

Yeah it does look like that this issue causes #3621. cc @vicky1999 in case you're already working on a fix.

[vicky1999]

@bluwy I think the above fix will solve the issue. but, we need to check this once.

[aolose]

I think some code change the history ,so I global searched history. then found it at:
kit/src/runtime/client/router.js line:191

// Check if new url only differs by hash
if (url.href.split('#')[0] === location.href.split('#')[0]) {
	// Call `pushState` to add url to history so going back works.
	// Also make a delay, otherwise the browser default behaviour would not kick in
	setTimeout(() => history.pushState({}, '', url.href));
	const info = this.parse(url);
	if (info) {
		return this.renderer.update(info, [], false);
	}
	return;
}

I don't know what does these code do,
the history.pushState here will record history one more time.
I try to delete it and run the Reproduction ,then hash links works fine~

[benmccann]

I've sent a PR for a failing test that can be uncommented when this issue is fixed: #3880

[benmccann]

This was fixed recently. The test has now been uncommented and passes:

kit/packages/kit/test/apps/basics/test/test.js

Line 217 in a37f3b3

await page.goBack();

[kyontan]

Great thanks to @benmccann !