feat: fallback route for ion-router

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Following up on #17423, we’d like the option to set a fallback/default route in case none of the routes is matching, e. g. to implement a “404 - Not Found” handling. The original request was closed but the provided “solution” is useless when not using Angular (e. g. in a Stencil app).

Describe Preferred Solution

On the Stencil website (which is using stencil-router) the solution is to have a route without a url (which I tried with an ion-route but didn’t work, and neither did an ion-route with url="*").

<ion-router >
  <ion-route url="/foo" component="page-foo" />
  <ion-route url="/bar" component="page-bar" />
  <ion-route component="page-404" />
</ion-router>

Describe Alternatives

Could add a property to ion-router that allows to set a component to render if no route was matched, e. g.

<ion-router noMatch="page-404">
  <ion-route url="/foo" component="page-foo" />
  <ion-route url="/bar" component="page-bar" />
</ion-router>

Possible names for that prop I can think of: noMatch, default, fallback.

Alternatively, there could be an ion-fallback-route component?

And yet another alternative: emit an event ionRouteNoMatch or similar (already suggested in the original issue), so we can at least handle this in some way.

Additional Context

The approach of having a route without url is also what React Router does (https://reacttraining.com/react-router/web/example/no-match), and I think it’s the most intuitive.

Are you open to a PR for this?

[badpenguin]

The funny thing is that stencil-router support fallback by just removing the url parameter. In Ionic + Stencil i succeeded for the moment using:

<ion-route url=":any" component="app-404"/>

[codyburleson]

I also need this badly. I’ve been building a solution with Ionic and Stencil only (no additional framework like Angular) and this is currently my only show-stopper for go-live. This issue has been open for 157 days and it’s not even assigned to anyone. For those seeking a pure platform-standard web components approach, this leaves a significant gap. Can you please reconsider the importance of this issue?