當使用者從一個頁面導覽到另一個頁面時，SvelteKit 會呼叫你的 load 函式，但前提是它認為某些東西已變更。

在這個範例中，在時區之間導覽會導致 src/routes/[...timezone]/+page.js 中的 load 函式重新執行，因為 params.timezone 是失效的。但是 src/routes/+layout.js 中的 load 函式 *不會* 重新執行，因為就 SvelteKit 而言，它沒有因導覽而失效。

我們可以透過使用 invalidate(...) 函式手動使其失效來修正此問題，此函式會接受一個 URL 並重新執行任何相依於它的 load 函式。因為 src/routes/+layout.js 中的 load 函式呼叫了 fetch('/api/now')，所以它相依於 /api/now。

在 src/routes/[...timezone]/+page.svelte 中，加入一個 onMount 回呼，每秒呼叫一次 invalidate('/api/now')

<script>
	import { onMount } from 'svelte';
	import { invalidate } from '$app/navigation';

	let { data } = $props();

	onMount(() => {
		const interval = setInterval(() => {
			invalidate('/api/now');
		}, 1000);

		return () => {
			clearInterval(interval);
		};
	});
</script>

<h1>
	{new Intl.DateTimeFormat([], {
		timeStyle: 'full',
		timeZone: data.timezone
	}).format(new Date(data.now))}
</h1>

你也可以將一個函式傳遞給 invalidate，以防你想根據模式而非特定 URL 使其失效