Stencil Router

The developer experience of the router is designed to be similar to React Router, and it should make it easy to build apps of all size, from the very simple to the very complex.


In your project directory, run npm install @stencil/router --save. Then add import '@stencil/router' to your root component (normally the my-app component if you are using one of the starters).


Applications built with Stencil should have one stencil-router element for the entire application. Make sure to specify an id attribute on it.

<stencil-router id="router">

Within the stencil-router element, we want to declare our set of stencil-routes. Each stencil-route needs a url attribute containing a path, and a component attribute containing an HTML element tag name.

    <stencil-route url="/" component="landing-page" exact={true}/>
    <stencil-route url="/demos" component="demos-page"/>
    <stencil-route url="/demos/rendering" component="fiber-demo"/>
    <stencil-route url="/docs" component="docs"/>
    <stencil-route url="/docs/getting-started" component="getting-started"/>
    <stencil-route url="/components" component="basics-components"/>

When navigating to /demos/rendering based on the above configuration, the demos-page component will be loaded with a child component fiber-demo. They will both be loaded as children of their corresponding stencil-routes but they are not related other than both match the route. Nested routes/components just work.

Server configuration

Depending on the choice you made regarding the hosting of your Stencil app, you may want to configure your server accordingly to the following.

Apache 2

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]


location / {
  try_files $uri $uri/ /index.html;
Back Next