Create a Not Found route

It is a common scenario that you will want to have a Not Found page incase you have a broken link or if someone where to accidently type in an incorrect URL. Fortunately the approach to create this is straight forward.

We will make use of the stencil-route-switch. This component allows us to group multiple routes together in an ordered manor. If the first doesn't match it will try the next in the list.

The trick is to create a route at the end of the list that does not have a specified url. This tells the route to match on any url. An example implementation can be seen below.

<stencil-router>
  <stencil-route-switch scrollTopOffset={0}>
    <stencil-route url="/" component="landing-page" exact={true}/>
    <stencil-route url="/demos" component="demos-page" />
    <stencil-route component="catch-all" />
  </stencil-route-switch>
</stencil-router>