Route with optional intermediary directory

[kael]

With SvelteKit, I'm trying to define the following routes :

/
/@user
/tag/foo
/@user/tag/foo

I wrote the following routes:

• params
  • handle.js

    export function match(value) {
      return value.startsWith("@");
    }

• routes
  • [[user=handle]]
    • [[tag]]
      • [[xtag]]
        • +page.js

          import { error } from '@sveltejs/kit';
          
          /** @type {import('./$types').PageLoad} */
          export function load({ params }) {
            console.log('params', params)
            if (params.tag && !params.xtag) throw error(404, 'Not found');
          
            return {
              post: {
                title: 'Hello world!',
                content: 'Welcome to our blog. Lorem ipsum dolor sit amet...',
              },
            };
          }

        • +page.svelte

          <script>
           import { page } from '$app/stores';
          
           export let data;
          </script>
          
          <header>
           {#if $page.params.user}
             <p>User: {$page.params.user}</p>
           {/if}
           {#if $page.params.xtag}
             <p>Tag: {$page.params.xtag}</p>
           {/if}
          </header>
          {#if data?.post}
           <h1>{data.post.title}</h1>
           <div>{@html data.post.content}</div>
          {/if}

  • +layout.svelte

    <slot/>

I'm able to get the following routes to work :

✅ http://localhost:5173/
✅ http://localhost:5173/@user
✅ http://localhost:5173/@user/tag/foo

The following route doesn't work:

❌ http://localhost:5173/tag/foo

And the following route works but shouldn't :

❌ http://localhost:5173/@user/tag

What I'm doing wrong ?

[vd-aloker]

This should work:

routes
  [[user=handle]]
    (user-only)
      +page.svelte
    (with-tags)
      [tag]
        [xtag]
          +page.svelte

I checked all use cases, these worked:
/
/@user
/tag/foo
/@user/tag/foo

and this one didn't:
/tag

You'll have two different pages (one with tags, one without - the user is optional in both), but I doubt it's possible otherwise. AFAIK you can't e.g. express that either both or none of [tag] and [xtag] have to be present. The trick with the routing groups above solves it.

[kael]

AFAIK you can't e.g. express that either both or none of [tag] and [xtag] have to be present. The trick with the routing groups above solves it.

Thank you very much for the example and the explanation.

I've defined the following tree (and replaced [[xtag]] with [tag] as there are no params name collision anymore):

routes
  [[user=handle]]
    (user-only)
      +page.svelte
    (with-tags)
      tag
        [tag]
          +page.svelte

Cheers. 👍