stencil route

This component renders based on whether the supplied url matches the current location.

property	type	description
url	string, array	the pathname to match on. Accepts paths similar to expressjs. So that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
component	string	the component name that you would like the route to render
componentProps	key/value Object	a key value object({ 'red': true, 'blue': 'white'}) containing props that should be passed to the defined component when rendered.
routeRender	function	function that accepts props as an argument. If this exists it will be used in place of the component defined.
exact	boolean	If true then only render this route when the url matches exactly to the location, if false it will render if the current url 'matches' the url defined.

Basic usage

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

Match multiple known routes

  <stencil-route url={["/", "home"]} component="landing-page" exact={true} />

Match unknown routes

It is possible that you might want to match based on any possible segment or have named captures In that case you can specify these in the url prop. In this case these are available within your component as props. More examples available in the Route Params Tutorial

  <stencil-route url="/page/:pageNum(\\d+)" component="page-item" />
  <stencil-route url="/user/:name?" component="user-page" />
  <stencil-route url="/user*" component="user-page" />

Passing props to the component

  <stencil-route url="/" component="landing-page"
    componentProps={{ firstName: 'Ellie' }} />

Using a routeRender function

There are times where your route will not need an entire component. For those occasions you can use the routeRender prop. This allows you to supply a function that accepts props object as the argument and returns jsx.

  <stencil-route url="/" exact={true} routeRender={
    (props: { [key: string]: any}) => {
      return <span>Hello {props.firstName}</span>;
    }
  } />