今天來介紹一個有趣的功能「Shallow routing」，直白翻譯的話叫做「淺層路由」，所謂淺層就是相對於一般的 routing 來說他雖然更新了 URL 但並沒有真正的換頁。

如果是用過 Next.js 的讀者應該能理解這個概念，可以讓這個更換 URL 的動作不要觸發真正的換頁進而不用重新執行 getServerSideProps 之類的過程。

基本用法

而 SvelteKit 中主要是用內建的 pushState function 來做到這件事情，第一個參數是路由的設定，如果 '' 就是維持 一樣的 URL，第二個參數則是我們要記錄的狀態，然後我們可以透過 $page store 取出來。

下面是一個開關 modal 的範例，當 $page.state.showModal 為 true 時就顯示 modal ，然後打開 showModal() ，就是將 {showModal: true} 放進 $page.state 裡面。

<script lang="ts">
	import { pushState } from '$app/navigation';
	import { page } from '$app/stores';

	function showModal() {
		pushState('', {
			showModal: true
		});
	}
</script>

{#if $page.state.showModal}
	<dialog class="modal-open modal">
		<div class="modal-box">
			<h3 class="text-lg font-bold">Hello!</h3>
			<p class="py-4">This modal works with a hidden checkbox!</p>
			<div class="modal-action">
				<button
					class="btn"
					onclick={() => {
						history.back();
					}}>Close</button
				>
			</div>
		</div>
	</dialog>
{/if}

<button onclick={showModal}>Show Modal</button>

可以發現我們是切換上下頁時 model 也會隨著開啟及關閉。

補充說明一下，如果是使用 typescript 的話需要到 app.d.ts 新增 type 定義的

declare global {
	namespace App {
		interface PageState {
			showModal: boolean;
		}
	}
}

以這個例子來說，就是需要定義 showModal 這樣才能讓 $page.state 擁有對應的 type

那好處是什麼？

如果有一個繁複步驟的表單我們可以利用 Shallow routing 來讓使用者可以快速前後頁跳轉，但不用擔心 re-redner 後造成的資料遺失，另外一個好處是可以配合手機的手勢，以 iOS 來說從最左邊往右滑就可以回上一步，那假設一樣式有一個 model 或其他覆蓋整頁的元件然後使用者就不用額外去點擊關閉或者其他操作可以透過手勢關掉。

參考資料

• https://kit.svelte.dev/docs/shallow-routing

• https://sveltekit.io/blog/shallow-routing

source code

• https://github.com/toddLiao469469/30days-for-svelte5/blob/main/src/routes/day25/%2Bpage.svelte

demo 站點

https://30days-for-svelte5.pages.dev/