feat: fallback route for ion-router

[simonhaenisch]

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?

[corysmc]

+1
Response from @paulstelzer in the original post

Thanks for the issue! This is not needed to be add to Ionic because you can do this with Angular Routing. Just add a wildcard and set it to your 404 page component.

Ionic can be used in vanilla js so relying solely on angular router isn’t a long term solution

[paulstelzer]

@corysmc good point, you are right

[PurpleEdge2214]

Also waiting for 404 redirect option.

In addition to this, using the default pwa ionic stencil app, the router matches...

http://localhost:3333/profile/somename/anything

...I don't think it should? The route specifies...

<ion-route url="/profile/:name" component="app-profile" />

...there is no second property.

[cpro90]

Hi,

we just went away from Angular using StencilJS and native JS alongside with Ionic. I see this routing feature does not exist so far. We also facing problems with stencil router; so it would be nice using ion-route with a fallback feature.

Will there be a solution in the nearer future?

[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?

[fmflame]

I used the ion-route-redirect and route comparisons to workaround this issue if this can help you out.

[simonhaenisch]

@fmflame do you mean you're repeating all your routes like

<ion-router>
  <ion-route url="/one" component="page-one" />
  <ion-route url="/two" component="page-two" />
  <ion-route url="/three" component="page-three" />
  <ion-route url="/404" component="page-404" />

  <ion-route-redirect from="/one" to="/one" />
  <ion-route-redirect from="/two" to="/two" />
  <ion-route-redirect from="/three" to="/three" />
  <ion-route-redirect from="*" to="/404" />
</ion-router>

This is quite unfeasible for us though.

[simonhaenisch]

For some reason I didn't think of this yesterday, but it's quite easy to avoid all this repetition:

import { FunctionalComponent } from '@stencil/core';
import { JSX } from '@ionic/core';

export const Route: FunctionalComponent<JSX.IonRoute> = props => [
  <ion-route {...props} />,
  <ion-route-redirect from={props.url} to={props.url} />,
];

import { Route } from './route';

<ion-router>
  <Route url="/one" component="page-one" />
  <Route url="/two" component="page-two" />
  <Route url="/three" component="page-three" />

  <ion-route-redirect from="*" to="/404" />
</ion-router>

That seems like a feasible work-around, might actually try it out at some point.

[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]

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"/>

Awesome! I tested this and it works for me too. In my opinion, in fact, this is perfectly sufficient. I'm not sure why the issue couldn't be closed with this being documented as the way to do it.