嵌套模板 Routes/Components

Question

我一直在尝试实现嵌套 routes/components。谁能给我解释一下如何嵌套 routes/components。模板路由文档没有太大帮助。说在我的组件中，左边有一个带有几个 stencil-route-link 的 sidenav，然后在右边我应该显示路由组件。

Answer 1

StencilJS docs 状态：

You should have one single stencil-router component in your project. This component controls all interactions with the browser history and it aggregates updates through an event system.

所以将有一个地方来定义您的路线。他们的网页上还有一个例子：

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

由于 Stencil 团队对此还有 not released a wiki entry，这里使用 @stencil/core: 1.3.2 和 @stencil/router: 1.0.1.

对该主题进行了一些更新

诀窍是将 routeRender 属性与 slot 和内联子路由结合使用：

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

中定义它们

Answer 3

我知道这是个老问题，但我花了一些时间才弄明白，所以我想在这里分享一下，以防有人运行遇到类似问题。

<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>
      <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”的单独组件，似乎运行良好）

嵌套模板 Routes/Components

Nested Stencil Routes/Components

stenciljs

stencil-component