How to implement a fallback route for 404/NotFound

[nexussays]

I see closed issues related to a fallback/404 route but I can't see how to implement it; I'm getting errors trying to use RouterSwitch

[jthoms1]

RouterSwitch is a functional component. You will need to import it specifically from @stencil/router in order to use it. An example of usage can be seen here. Also ensure that you are using version 0.0.27

https://github.com/ionic-team/stencil-router/blob/master/src/components/__tests__/test-app.tsx#L39

[nexussays]

I tried that, sorry, should have included the exception:

{ Error: 'RouterSwitch' is not exported by #collection#
    at error (app\node_modules\rollup\dist\rollup.js:170:15)
    at Module.error (app\node_modules\rollup\dist\rollup.js:17195:9)
    at handleMissingExport (app\node_modules\rollup\dist\rollup.js:17458:12)
    at app\node_modules\rollup\dist\rollup.js:19070:56
    at Array.reduce (<anonymous>)
    at Graph.handleMissingExport (app\node_modules\rollup\dist\rollup.js:19069:27)
    at Module.trace (app\node_modules\rollup\dist\rollup.js:17292:28)
    at ModuleScope.findVariable (app\node_modules\rollup\dist\rollup.js:14431:28)
    at Scope.findVariable (app\node_modules\rollup\dist\rollup.js:11491:68)
    at FunctionScope.Scope.findVariable (app\node_modules\rollup\dist\rollup.js:11491:68)
  code: 'MISSING_EXPORT',
  url: 'https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module',
  pos: 9,
  loc:
   { file: 'app/dist/collection/components/my-app/my-app.js',
     line: 1,
     column: 9 },
  frame: '1: import { RouterSwitch } from \'@stencil/router\';\r\n            ^\n2: export class MyApp {\r\n3:     render() {\r' }

[jthoms1]

Once the corresponding issue is closed in stencil. I will rerelease the router to fix. Thank you!

[joewoodhouse]

Looks like the corresponding issue has been fixed, will we get a new release? Not having a 404 route /redirect is a bit of a pain!

[jgalley]

+1! We require a 404 route too please

[jthoms1]

@stencil/router 0.1.0 published 🎉

We have introduced a Router Switch. Please refer to the following link for how to use it. This also includes the ability to use a 404 fallback route.

1. Import the RouterSwitch.

   import { RouterSwitch } from '@stencil/router';

2. Wrap your routes with the Switch.

   <stencil-router>
   <RouterSwitch>
       <stencil-route url="/" component="landing-page" exact={true} />
       <stencil-route url="/demos" component="demos-page" />
       <stencil-route url="/other" component="other-page" />
   </RouterSwitch>
   </stencil-router>

3. Add a route as the last item in the list and do not give it a url to match on.

   <stencil-router>
   <RouterSwitch>
       <stencil-route url="/" component="landing-page" exact={true} />
       <stencil-route url="/demos" component="demos-page" />
       <stencil-route url="/other" component="other-page" />
       <stencil-route component="page-not-found" />
   </RouterSwitch>
   </stencil-router>

An example of the full implementation can be seen here in the stenciljs.com src. https://github.com/ionic-team/stencil-site/blob/master/src/components/stencil-site/stencil-site.tsx