URL set to /404.html even though routing works

[plasmatech8]

I was trying out some Svelte routers.

I decided to try testing the Vite Svelte template using the sample project from the svelte-spa-router repo (a different router).

Then I tried converting this example project from svelte-spa-router to svelte-router-spa.

The result is:

• this code for svelte-spa-router
• this code for svelte-router-spa

However, URL path keeps getting set to /404.html. Any ideas why?

[jorgegorka]

Hi @plasmatech8

You don't need these lines: https://github.com/plasmatech8/svelte-practice/blob/main/06_svelte-spa-router_examples/basic-routing-using-svelte-router-spa-instead/src/routes.js#L17-L20

Named params are optional so a route like: '/wild/:card' will serve both /wild and /wild/some-info

Also in line 14 https://github.com/plasmatech8/svelte-practice/blob/main/06_svelte-spa-router_examples/basic-routing-using-svelte-router-spa-instead/src/routes.js#L14 As all named params are optional by default there is no need to use ?

To be more specific: A route like this one https://github.com/plasmatech8/svelte-practice/blob/main/06_svelte-spa-router_examples/basic-routing-using-svelte-router-spa-instead/src/routes.js#L13-L16 will serve all this urls:

/hello
/hello/first-param
/hello/first-param/second-param

Hope that helps.

[plasmatech8]

@jorgegorka thanks for the comment :)

I am still not sure why it is changing the path to /404.html though.

Perhaps something to do with Vite. Or an issue with how the router handles anchor tags / routing. Not sure.

• <Navigate to="/does/not/exist">Not found</Navigate> component works (but only from within the routes/router, not in the higher-level components)
• Typing the URL path directly in the address bar works
• <a href="/something">something</a> appears to navigate correctly, but erroneously changes the path to /404.html
• <button on:click={() => navigateTo('/wild/dafasdf')}>asdasd</button> appears to not navigate, and erroneously changes the path to /404.html

[jorgegorka]

I haven't tried Vite yet

@jorgegorka thanks for the comment :)

I am still not sure why it is changing the path to /404.html though.

Perhaps something to do with Vite. Or an issue with how the router handles anchor tags / routing. Not sure.

* `<Navigate to="/does/not/exist">Not found</Navigate>` component works (but only from within the routes/router, not in the higher-level components)

You need to add the router at the very beginning of your application otherwise it would be unable to route urls correctly.
https://github.com/jorgegorka/svelte-router#usage

If you have something like:

<MainAPP>
<Header/>
<Sidebar/>
<Router {routes} />
<Footer />
</MainApp>

Then Header, Sidebar and Footer will know nothing about routes. They should all be rendered in a template inside <Router />.

In this application you can see an example with plenty of routes:

https://github.com/jorgegorka/demanda/blob/master/frontend/src/App.svelte
https://github.com/jorgegorka/demanda/blob/master/frontend/src/routes.js