Very nested routes quirks

I’m trying to use new 3 version.

Reproduction project: https://codesandbox.io/s/svelte-spa-router-very-nested-routes-mskmc?file=/todo/Index.svelte

Questions:

1. Can we use one regex for this code in todos/Index.svelte?

   .set("/:ID", Show)
   .set("/:ID/*", Show);
   

2. Why do we need to use const prefix = "/todos" both in todos/Index.svelte and todos/Show.svelte? Can we just use const prefix = "/:ID" in todos/Show.svelte? (https://github.com/ItalyPaleAle/svelte-spa-router/issues/134)

3. Can we avoid prefixes at all?

[ItalyPaleAle]

First question

There was a small mistake in the regular expression I gave you. It doesn’t work unless you add $ at the end.

In todos/Index.svelte, your match should be (note the addition of the $ at the end of the matching sequence)

.set(/^\/(.*?)(\/(.*?))?$/, Show)

Because the match is using a regexp now, as per the docs I linked above, you can’t use params.ID anymore as you’re doing in the file. Instead, you need to use params[1] (because the ID is in the first matched group).

So, in todos/Show.svelte you also need to change:

<a href={`#/todos/${params.ID}/edit`}>Edit todo</a> | <a href={`#/todos/${params.ID}/notes`}>Todo notes</a>

to:

<a href={`#/todos/${params[1]}/edit`}>Edit todo</a> | <a href={`#/todos/${params[1]}/notes`}>Todo notes</a>

Second question

As I explained above, the prefix has to be relative to the full path being matched. If you’re using a double-nested router, you still need to set /todos in the prefix.

However, in Show.svelte you can set a longer prefix that includes the ID, but:

1. You’ll have to use a regular expression for the prefix, so something like prefix = /^\/todos(\/(.*))?/i
2. You’ll need to remove /:ID from the route definition object in Show.svelte, so the inner routes will NOT have access to the ID prop

[frederikhors]

You’ve made it really clear now.

Thanks.