Search code examples
stenciljsstencil-component

Nested Stencil Routes/Components

I’ve been trying to implement nested routes/components. Can someone just please explain to me how to nest routes/components. The stencil route docs aren’t of much help. Say In my component I have on the left a sidenav with a couple of stencil-route-link then on the right I should show the routed component.

Solution

  • As the Stencil team has still not released a wiki entry for this, here's a little update to this topic using @stencil/core: 1.3.2 and @stencil/router: 1.0.1.

    The trick is to use the routeRender property in combination with slots and inline child routes:

    <stencil-router>
  <stencil-route-switch>
    <stencil-route url="/"
                   exact={ true }
                   component="app-home"
    />
    <stencil-route url="/me"
                   routeRender={ () => (
                     <app-me>
                       <stencil-route url="/me/login"
                                      component="app-login"
                       />
                       <stencil-route url="/me/profile"
                                      component="app-profile"
                       />
                     </app-me>
                   ) }
    />
  </stencil-route-switch>
</stencil-router>;

    If you define the child routes inside your component (in this example app-me) the route may not be recovered after a reload or by navigating directly to it. Thus you have to define them inside your global stencil-route-switch.