stencil route

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

property	type	description
url	string	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} />

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 occations 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>;
    }
  } />