How do you create routes with optional parameters in Sapper?

Question

Let's say I have a /foo route. But sometimes people hit /foo with a language parameter: /fr/foo. And other times they might hit it with a language and a country: /ca/fr/foo

So I need a routing table like

[country]/[language]/foo 
[language]/foo 
/foo 

That all direct to the same page.

Should I create a tree like this?

src/routes
└── [country]
    └── [language]
        └── foo.svelte

If that's the answer then how do I direct [language]/foo to [country]/[language]/foo?

I don't see any optional params in the docs

Jadwigajae

Answer 1

Optional parameters aren't yet supported, but you can almost fake it with 'rest routes' (which I've just realised aren't yet documented 🤦‍♂️) — routes/[...parts]/foo.svelte would render foo.svelte with a page.params.parts array that contained the preceding segments.

Unfortunately that doesn't match /foo, which it arguably should. I've raised an issue: https://github.com/sveltejs/sapper/issues/765

Selfcongratulation

Answer 2

In my case I needed /dashboard/reset/TOKEN/ID route. I made it worked with the following structure:

[acool@localhost cool-sapper-project]$ tree src/routes/
src/routes/
├── dashboard
│   ├── reset
│   │   └── [...parts].svelte

The above will make TOKEN and ID parameters available in params in your page:

<script context="module">
 export async function preload({ params }, session) {
 console.log(JSON.stringify(params));
}
</script>

Output:

{"parts":["2fd4e1c67a2d28fced849ee1bb76e7391b93eb12","1"]}

Good Luck!

Ketchan

Answer 3

For any one looking for an answer. This is now supported.

src/routes
└── [country]
    └── [[language]]
        └── foo.svelte

Coxa