Issue/question - goto fails on route with spread operator

[Tommertom]

Hi

I have a folder structure /components/tabs in my routes. It contains a [...tabs].svelte file to handle routes like /components/tabs/blabla

These resolve correctly - if I add the full url in the navigation bar - e.g. http://localhost:3000/components/tabs/blabla. Or https://ionicsvelte.firebaseapp.com/components/tabs/blabla

There seem to be two issues:

1. A call to $goto('/components/tabs') yields a blank page - blocking the full app. I tried adding a [...fallback].svelte in the tabs folder, but that makes all routes like /components/tabs/blabla use the fallback.

Calling tabs in the url also gives same result: https://ionicsvelte.firebaseapp.com/components/tabs

I would have expected any fallback to kick-in on this route, or the route paramters to [...tabs].svelte being empty. But the [...tabs].svelte component does not seem to be loaded

2. A call to $goto('/components/tabs/blabla') gives an error : could not find destination node /components/tabs/blabla and then resolves to the generic fallback. Using $url only gives the error.

I would have expected this route to be loaded without complaints

Code related to tabs : https://github.com/Tommertom/svelte-ionic-app/tree/master/src/routes/components/tabs

Navigation code:

<ion-item
          on:click={() => {
            $goto("/components/tabs/blabla");  // or $goto("/components/tabs");
          }} >
          <ion-icon icon={allIonicIcons["star"]} slot="start" />
          <ion-label>TEST GOTO fails</ion-label>
        </ion-item>
<ion-item />

I had some struggles getting to understand how to do this in Routify3. If there is any help, would be appreciated!

[jakobrosenberg]

Have you tried a tabs/index.svelte? The wildcard would only match nested pages of tabs and not the tabs page itself.

[Tommertom]

Hi - this solves one part. Not the goto-part. Still getting could not find destination node /components/tabs/blabla

[Tommertom]

Hi

So I made myself a workaround by changing the $goto route for /components/tabs to /components/tabs/[...tabs]. A $goto to /components/tabs/index won't work even though it is a child from the node under traverse('/components/tabs').

So ideally, if you ask me, if a folder (like components/tabs) has an index.svelte, then any $goto request to path /components/tabs hould resolve to that index.svelte in the folder. To me it's a sort of fallback route for that folder.

I am now fine with manually adding the /components/tabs/[...tabs] path as argument to $goto as this one works.

[jakobrosenberg]

Hi @Tommertom sorry about the slow follow up. I agree that $goto should maybe automatically resolve the leaf index.svelte if one exists for the path.

It's worth pointing out that history.pushState can be used with Routify. $goto works the same as pushState, except $goto uses the internal filepath with destructured parameters. IIRC $goto(somepath) === history.pushState(${url(somepath)}).