Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
Stores
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

In the first chapter on routing, we learned how to create routes with dynamic parameters.

Sometimes it’s helpful to make a parameter optional. A classic example is when you use the pathname to determine the locale — /fr/..., /de/... and so on — but you also want to have a default locale.

To do that, we use double brackets. Rename the [lang] directory to [[lang]].

The app now fails to build, because src/routes/+page.svelte and src/routes/[[lang]]/+page.svelte would both match /. Delete src/routes/+page.svelte. (You may need to reload the app to recover from the error page).

Lastly, edit src/routes/[[lang]]/+page.server.js to specify the default locale:

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>