How to force a page reload when clicking on SvelteKit link

I recently came a problem where I have a link tag on my SvelteKit app, and the page URL does change but it’s holding onto old state. This is problematic because it may be out of sync with other parts of the application.

In today’s short article, I will go over how to reload a page after clicking on a link tag.

The Best Solution

Now the reason, your SvelteKit link tag with the href property is not refreshing the page is because SvelteKit is using client-side routing by default.

To get around this problem, you can add the data-sveltekit-reload property to your link element.

<a href="/dashboard" data-sveltekit-reload>Dashboard</a>

Alternative Solution

Another way to force a full-page reload is to use JavaScript’s window.location.href method.

<button on:click={() => window.location.href = '/dashboard'}>Dashboard</button>

I like to tweet about SvelteKit and post helpful code snippets. Follow me there if you would like some too!