メインコンテンツへスキップ

ルーターが無効な入力に一致しないようにするために、マッチャーを指定できます。たとえば、/colors/[value]のようなルートを、/colors/ff3e00のような16進値には一致させたいが、/colors/octarineのような名前付きの色やその他の任意の入力には一致させたくない場合があります。

まず、src/params/hex.jsという名前の新しいファイルを作成し、そこからmatch関数をエクスポートします

src/params/hex
export function match(value) {
	return /^[0-9a-f]{6}$/.test(value);
}

次に、新しいマッチャーを使用するには、src/routes/colors/[color]src/routes/colors/[color=hex]に名前を変更します。

これで、誰かがそのルートに移動するたびに、SvelteKitはcolorが有効なhex値であることを検証します。そうでない場合、SvelteKitは他のルートとの一致を試み、最終的に404を返します。

マッチャーはサーバーとブラウザーの両方で実行されます。

このページをGitHubで編集

1
2
<h1>color picker</h1>