[Svelte/SvelteKit] パスパラメータ・クエリーパラメータの取得方法

SvelteKit、公式ドキュメントが貧弱すぎて困るのでパスパラメータ・クエリーパラメータの取得方法について書きます。

一応パスパラメータは書いてあるがクエリーパラメータについてはあまり記載がない…。

https://kit.svelte.dev/docs#loading

以下のコードのサーバーサイド処理(クライアントでも走るが…)のload関数でクエリーパラメータ・パスパラメータを取得します。

load関数はurl, paramsが引数に入り、urlはURLオブジェクト(https://developer.mozilla.org/ja/docs/Web/API/URL)、paramsはパスパラメータが入っています。

paramsの方は公式ドキュメント通りで、urlもURLオブジェクトなのでsearchParamsから同じように値が取得できます。

<ホスト名>/test/<パスパラメータ>?q=<クエリーパラメータ>でアクセスするとパスパラメータ・クエリーパラメータが表示されます。

<script context="module" lang="ts">
	import type { Load } from '@sveltejs/kit';

	export const load: Load = ({ url, params }) => {
		const name = params.name ?? '';
		const queries = url.searchParams;
		const q = queries.has('q') ? queries.get('q') : '';
		return {
			props: {
				name: name,
				q: q
			}
		};
	};
</script>

<script lang="ts">
	export let q = '';
	export let name = '';

	// サーバーサイドでプリレンダリングされるときにlocationオブジェクトは存在しないためエラーになる
	// const q = new URLSearchParams(location.search).get('q');
</script>

<p>query params[q] : {q}</p>
<p>path params[name] : {name}</p>
<p>{p}</p>

ちなみにいちいちload関数書くの面倒なのでクライアント側で取得できないかなーと思ってlocation.searchなどでやりましたが、サーバーサイドでプリレンダリングするときに怒られました。

onMountで取るって手はあるが結局関数増えるからなあ…。良いやり方あったら教えてください。

参考ページ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です