SvelteKit resolve()を使った安全なRouting

Routing における問題

Routingを扱う時に主に以下の問題があるかと思います

• タイポによる Routing 間違い
• Pathが変更された時のリグレッション発生
• basePath が指定された時にすべての path に base path を入れなくちゃいけない。例) '/base-path/blogs'. base path が変わった時大変

Resolve がすべて解決

import { resolve } from '$app/paths'; を使用することでプロジェクト内の routes を参照して、存在しない Path であればエラーで教えてくれます。
また 引数を追加することによって Parameter に対して値をダイナミックに変更することも可能です。

basePath が設定されている場合は自動で basePath を含んだ Path に遷移してくれます。

<!-- 使用例 -->
<script lang="ts">
	import { resolve } from '$app/paths';
</script>

<a href={resolve('/blogs')}>Go to Blogs Home</a>
<a href={resolve('/blogs/[id]', { id: '1' })}>Go to My First Blog</a>
<a href="/blog">これだと Base Path が設定されている時には 404 になってしまう</a>

補完・候補も表示してくれるので開発体験も良いです。

APIの詳細

SvelteKit を使う時は import { resolve } from '$app/paths'; を使うことをお勧めします！