How to implement fallback page with Ionic 4 router (and without Angular) - ionic-framework

Question

I am using Ionic 4 and Stenciljs for a progressive web app (PWA) and I am not also using Angular. I am using ion-router for the routing. Can anybody help me understand how to implement a fallback "Page Not Found" page to display when someone enters a URL for which there is no defined route (i.e. a page that does not exist)? All the examples I can find assume the use of Angular, but I'm trying to see if I get where I need with just standard web components and no additional framework.
Following is how some of my current router code looks (it makes use of the tabs component).
return (
<ion-router useHash={false}>
<ion-route-redirect from="/" to='/blog' />
<ion-route component="page-tabs">
<ion-route url="/blog" component="tab-blog">
<ion-route component="page-blog"></ion-route>
</ion-route>
<ion-route url="/books" component="tab-books">
<ion-route component="page-books"></ion-route>
</ion-route>
<ion-route url="/art" component="tab-art">
<ion-route component="page-art"></ion-route>
</ion-route>
<ion-route url="/about" component="tab-about">
<ion-route component="page-about"></ion-route>
</ion-route>
<ion-route url="/beaver-cage-command-chron" component="tab-books">
<ion-route component="page-cmd-chron-beaver-cage"></ion-route>
</ion-route>
<ion-route url="/cage" component="tab-books">
<ion-route component="page-cage"></ion-route>
</ion-route>
<ion-route url="/d-1-3-weapons-platoon" component="tab-books">
<ion-route component="page-photos-weapons-platoon"></ion-route>
</ion-route>
<ion-route url="/ray-kelley-silver-star" component="tab-books">
<ion-route component="page-ray-kelley-silver-star"></ion-route>
</ion-route>
<ion-route url="/photos" component="tab-books">
<ion-route url="/:name" component="app-photos"></ion-route>
</ion-route>
<ion-route url="/vietnam-1967-amphibious-combat" component="tab-books">
<ion-route component="page-vietnam-1967-amphibious-combat"></ion-route>
</ion-route>
{blogPostRoutes}
</ion-route>
</ion-router>
);
}

Answer 1

The only way I know of that this is possible is using multiple route redirects:
<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>
That is because only the first matching route-redirect will be called. However this becomes quite unfeasible for a large number of routes. A feature request for adding a fallback route is being tracked on Ionic's Github Repo.
Edit: I actually just had the idea of wrapping this in a functional component to avoid having so much duplication:
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>

Answer 2

You can add a route for fallback page at the end of the router like so
const routes: Route = [
{path: "OtherPaths",component: OtherPathsComponent},
{path: "PathNotFound", component: PathNotFoundComponent},
{path: "**", redirectTo: "PathNotFound"}
]