typescriptsveltesveltekit

SvelteKit: Slug Route within a Group Route

I have this SvelteKit directory setup: routes/(main)/vergabeassistent. Within that directory I have:

Calling localhost:5173/vergabeassistent works fine and is a list view. I now wanted to create slug route for the detail view and the id is a parameter in the url. However, calling localhost:5173/vergabeassistent/SOMEID is not being found at all. I suspect this may be caused by the fact that I am already withhin a the group route of (main)? The +page.svelte of the slug route looks like this:

<script lang="ts">
    import type { PageData } from './$types';

    export let data: PageData;
</script>

<h1>{data}</h1>

What am I doing wrong?

Solution

  • It turns out this issue wasn’t related to Svelte or SvelteKit itself, but to a limitation in the Quinoa/Quarkus stack we’re using.

    Specifically, when running a SvelteKit with dynamic routes like /routes/activate/[activationToken]/+page.svelte, Quarkus throws a 400 Bad Request during development. This happens because the Vert.x HTTP layer in Quarkus performs strict URI validation, and URLs containing characters like square brackets ([ ]) are considered invalid according to Java’s URI class (which follows strict RFC rules).

    Here is the Github issue and this will not be fixed in the future.