when clicked on an href the new URL doesn't reload the page in Svelte

Question

I'm currently trying to redirect the user to a new page when they clicked on a href link. The problem is that the url does change per se, but only when I manually hit "reload", the page actually refreshes and shows the new data.

How I build the href-link:

resultString += "<a href='/edition/id=" + this.note['name'][i]['hkg:persKey'] + "'>";
resultString += this.note['name'][i]['#text'];
resultString += "</a>";

The resultString then gets pushed to an array and is correctly read out in another component.

The problem is, that when redirected, the id in the url visibly changes and is updated in the url but the page doesn't reload.

for example: on page with 'id=xy' the URL is: '/edition/id=xy' and on this page, the href '/edition/id=z' is displayed. When clicking on this href, the url changes visibly to '/edition/id=z' but the page doesn't reload.

Does anyone know how to solve this?

Answer 1

This is a feature of Sveltekit. You could try adding rel=external to your links

<a rel="external" href="path">Path</a>

Source: https://kit.svelte.dev/docs/link-options#data-sveltekit-reload

Answer 2

Once I encountered the same behavior. I don't remember what it was, but I cured it with target="_self"

Answer 3

I met this problem today, and after a while looking around I found this in SvelteKit FAQs:

It's likely you're destructuring values from data without making them reactive. Reactive destructuring looks like this:

$: ({ user } = data)

You can also save a line of code by calling data.user directly in markup.

Answer 4

According to Svelte's current documentation this should work

<a data-sveltekit-reload href="/path">Path</a>

The link provided by Alexvdvalk helped me out https://kit.svelte.dev/docs/link-options#data-sveltekit-reload