Basic Svelte
Introduction
Bindings
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
Stores
Errors and redirects
Advanced SvelteKit
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']
};
}
previous next
1
2
<h1>hello!</h1>