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

ルーティングに関する最初の章では、動的パラメータを使用してルートを作成する方法を学びました。

パラメータをオプションにするのが役立つ場合があります。典型的な例としては、ロケールを決定するためにパス名を使用する場合 (/fr/..., /de/... など) がありますが、デフォルトのロケールも必要です。

そのためには、二重括弧を使用します。[lang] ディレクトリの名前を [[lang]] に変更します。

これでアプリのビルドが失敗します。なぜなら、src/routes/+page.sveltesrc/routes/[[lang]]/+page.svelte の両方が / に一致するからです。src/routes/+page.svelte を削除します。(エラーページから回復するには、アプリのリロードが必要になる場合があります)。

最後に、デフォルトのロケールを指定するように src/routes/[[lang]]/+page.server.js を編集します。

src/routes/[[lang]]/+page.server
const greetings = {
	en: 'hello!',
	de: 'hallo!',
	fr: 'bonjour!'
};

export function load({ params }) {
	return {
		greeting: greetings[params.lang ?? 'en']
	};
}

GitHubでこのページを編集

1
2
<h1>hello!</h1>