data-sveltekit-reload href="#id" blocks subsequent beforeNavigate

[hyunbinseo]

Describe the bug

Clicking on this anchor with a URL hash:

<a href="#message" data-sveltekit-reload></a>

1. Blocks subsequent beforeNavigate from running
2. Results in the following navigation object

{
  "from": { "params": {}, "route": { "id": "/" }, "url": "http://localhost:5174/" },
  // Even if it is a data-sveltekit-reload anchor navigation,
  // params and route can be populated in a hash navigation.
  "to": { "params": null, "route": { "id": null }, "url": "http://localhost:5174/#message" },
  "willUnload": true, // should be false
  "type": "link",
  "complete": {}
}

---

This seems to be causing the following issue,

• Can't navigate back from a path with hash and data-sveltekit-reload #12188

because using plain HTML is a valid workaround.

{@html '<a href="#message">Show hidden message</a>'}

---

Usage

Skip navigation using hash URL anchor.

Fix :target CSS pseudo-class styling.

• Anchor with #hash not showing :target CSS after history.back() #10550
• CSS :target selector does not work after page move #11848

Reproduction

<!-- src/routes/+page.svelte -->

<script>
  import { beforeNavigate } from '$app/navigation';
  beforeNavigate((navigation) => console.log(navigation));
</script>

<!-- Click the anchors in order. -->
<ol>
  <li><a href="#message" data-sveltekit-reload>Show hidden message</a></li>
  <!-- beforeNavigate() is not called. -->
  <li><a href="/page">Goto another page</a></li>
</ol>

<span id="message">This is the hidden message.</span>

<style>
  #message:not(:target) {
    display: none;
  }
</style>

<!-- src/routes/page/+page.svelte -->
<p>Press the browser's back button</p>
<p>You probably have to click it twice</p>

Logs

No response

System Info

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 202.06 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.16.0 - ~/.local/state/fnm_multishells/96031_1723864577634/bin/node
  npm: 10.8.1 - ~/.local/state/fnm_multishells/96031_1723864577634/bin/npm
  pnpm: 9.7.0 - ~/.local/state/fnm_multishells/96031_1723864577634/bin/pnpm
Browsers:
  Chrome: 127.0.6533.120
  Edge: 127.0.2651.105
  Safari: 17.6
npmPackages:
  @sveltejs/adapter-auto: ^3.2.4 => 3.2.4 
  @sveltejs/kit: ^2.5.22 => 2.5.22 
  @sveltejs/vite-plugin-svelte: ^3.1.1 => 3.1.1 
  svelte: ^4.2.18 => 4.2.18 
  vite: ^5.4.0 => 5.4.0

Severity

serious, but I can work around it

Additional Information

No response