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で取るって手はあるが結局関数増えるからなあ…。良いやり方あったら教えてください。