Вложенные трафаретные маршруты / компоненты

Question

Я пытался реализовать вложенные маршруты / компоненты. Может кто-то просто, пожалуйста, объясните мне, как вкладывать маршруты / компоненты. Трафаретные документы не очень помогают. Скажем, в моем компоненте слева у меня есть sidenav с парой stencil-route-link тогда справа я должен показать перенаправленный компонент.

Answer 1

Я знаю, что это старый вопрос, но мне потребовалось некоторое время, чтобы разобраться в этом, поэтому я хочу поделиться здесь, если у кого-то возникнут похожие проблемы.

      <stencil-router>
  <stencil-route-switch scrollTopOffset={0}>
    <stencil-route url="/" component="app-home" exact={true} />
    <stencil-route url="/profile/:name" component="app-profile" />

    <stencil-router>
      <stencil-route-switch scrollTopOffset={0}>
        <stencil-route url="/" component="app-home" exact={true} />
        <stencil-route url="/profile/:name" component="app-profile" />

        <stencil-route url="/docs" routeRender={()=>
          <div>
          <div>Document Heading</div>

          <stencil-route-link url="/docs/setup">Setup</stencil-route-link>
          <stencil-route-link url="/docs/todo">TODO</stencil-route-link>
          <stencil-route-link url="/docs/profile">Profile</stencil-route-link>

          <stencil-route url="/docs/setup" routeRender={()=>
            <div>Set up document</div>}>
          </stencil-route>
          <stencil-route url="/docs/todo" routeRender={()=>
            <div>TODO document</div>}>
          </stencil-route>
          <stencil-route url="/docs/profile" component="app-home" />
          </div>
        }>
    </stencil-route>
  </stencil-route-switch>
</stencil-router>

Краткое объяснение:

• Как поделились Titsjmen , похоже, важно, чтобы в вашем приложении был только один компонент.
• Однако вы можете вложить "stencil-route", и, надеюсь, с помощью приведенного выше примера кода я тестировал как с использованием routeRender, так и с компонентным подходом (оба работают!)

Надеюсь, это будет кому-то полезно :)

РЕДАКТИРОВАТЬ (дополнительное примечание): в случае, если это не ясно, этот блок кода представляет область, в которой вы хотите поменять местами компоненты на основе URL-адреса - вернуться к исходному вопросу, для достижения того, что вы хотите, боковая навигация может быть просто вопросом наличия связка "stencil-router-link" (которую не нужно помещать в один и тот же компонент - у меня есть отдельный компонент, называемый "sidenav-item", и, похоже, он работает хорошо)

Answer 2

Документация StencilJS гласит:

В вашем проекте должен быть один компонент Stencil-router. Этот компонент контролирует все взаимодействия с историей браузера и собирает обновления через систему событий.

Так что будет одно место для определения ваших маршрутов. На их веб-странице также есть пример:

<stencil-router>
  <stencil-route url="/" component="landing-page" exact={true}/>
  <stencil-route url="/demos" component="demos-page"/>
  <stencil-route url="/demos/rendering" component="fiber-demo"/>
</stencil-router>

входящий /demos/rendering будет отображать как демо-страницы, так и волоконно-демонстрационные компоненты. Они не будут вложенными, хотя.

В документах также упоминается routeRender атрибут, который можно использовать для выполнения какого-либо вложения. Например:

<stencil-route url="/" exact={true} routeRender={(props) => (
  <app-root history={props.history}>
    <app-sidebar />
    <app-content />
  </app-root> 
) />

Answer 3

Поскольку команда Stencil до сих пор не выпустила вики-запись для этого, вот небольшое обновление этой темы, используя@stencil/core: 1.3.2 а также @stencil/router: 1.0.1.

Уловка состоит в том, чтобы использовать routeRender недвижимость в сочетании с slots и встроенные дочерние маршруты:

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

Если вы определяете дочерние маршруты внутри своего компонента (в этом примере app-me) маршрут не может быть восстановлен после перезагрузки или перехода непосредственно к нему. Таким образом, вы должны определить их внутри вашего глобальногоstencil-route-switch.