Skip to content

stencil route switch

Jump to bottom
Josh Thomas edited this page Jun 6, 2018 · 7 revisions

Use the stencil-route-switch anytime you have multiple routes that you would like to group together. This is useful for top level navigation of an app where you will only ever want one route to match. This is also required when you are defining default not found pages.

property type description
scrollTopOffset number scroll to a specific location on route change then set this property. By default it does not scroll, but in most cases you will likely want to set it to 0 so that it scrolls back to the top of the content on page transition.

Basic usage

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

In the above example:

  • If the route is / the first route would match and the landing-page component would be displayed
  • If the route is /demos the second route would match and the demos-page component would be displayed
  • If the route is /something the third route would match and the catch-all component would be displayed

NOTE: The third route does not have a url prop so it will match everything that was not caught by the previous 2.

Components

Tutorials

Clone this wiki locally