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?

Abbotsen

Any updates on this one? Using rel="external" feels like cheating. – Lyublin

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

Nickienicklaus

Silly feature, break standard linking html :-/ – Bedding

Answer 2

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

Cycle

I was navigating to a local element using <a href="#my-element">Click</a> and I noticed it refreshed the whole page every time. Apparently this target="_self" is a thing you're supposed to do when linking internally. I dunno how I missed it. – Yenyenisei

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.

Prakash

Found this question while trying to reload data in my page when the params change, so I don't want the page to really reload. So you can use a reactive statement alongside the params store (from import { page } from "$app/stores";) : $: loadData($page.params.id) – Ysabel

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

Milliner