Wildcard route declared last catches all routes

[n1313]

I am trying to setup a configuration where URLs with no matching route would display a NotFoundPage component. It looks like the wildcard route should help me achieve this, but I find its behaviour confusing.

The following setup displays NotFoundPage for pathname / (and for every other pathname as well), so there is no way to access HomePage:

<Router>
  <Route path="/" component={HomePage} />
  <Route path="*" component={NotFoundPage} />
</Router>

If I reverse the order in which my routes are declared, then I get what I need. The following setup displays HomePage for pathname / and NotFoundPage for everything else:

<Router>
  <Route path="*" component={NotFoundPage} />
  <Route path="/" component={HomePage} />
</Router>

It feels weird having to declare 404 as the first item of my router, above my index page. Am I doing something wrong, or is this the intended behaviour?

I'm using svelte 3.2.0 and svero 0.2.4, Firefox 66 OSX.

[kazzkiq]

There is nothing wrong with your code.

It seems it's a Svelte quirk at the moment that makes sibling components render in reverse order. Check sveltejs/svelte#2281.

Edit: fixed Svelte Issue link.

[n1313]

Thank you for the explanation! I will monitor the issue you linked and will update here when the problem is fixed.

[EmilTholin]

I think the wrong link was posted here. I believe you want to monitor this.

[kazzkiq]

You're right! Updated link in my comment to prevent further confusion.

[pateketrueke]

Hi @n1313 recently we released a major version of svero aiming to solve many issues/features, in that update * behavior was changed, also a fallback keyword was added to serve as this purpose.

Also, it was built on top a routing module that order-and-match your routes based on depth and complexity, so in your example both cases are exactly the same now.

Please let us know if this works for you.

[kazzkiq]

Svero is now deprecated. Check #68 for alternatives.