Skip to main content

ルーティング(Routing) の最初の章で、動的なパラメータ付きのルート(routes)を作成する方法について学習しました。

パラメータをオプショナルにできたら便利なときがあるでしょう。その代表的な例は、ロケールを決めるのにパス名を使用する場合です — /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']
	};
}

Edit this page on GitHub

1
2
<h1>hello!</h1>