ルーターが無効な入力に一致しないようにするために、マッチャーを指定できます。たとえば、/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を返します。
マッチャーはサーバーとブラウザーの両方で実行されます。
1
2
<h1>color picker</h1>