嵌套模板路由/组件答案

【问题标题】：Nested Stencil Routes/Components嵌套模板路由/组件
【发布时间】：2026-01-06 05:45:01
【问题描述】：

我一直在尝试实现嵌套路由/组件。有人可以向我解释如何嵌套路由/组件。模板路线文档没有太大帮助。说在我的组件中，我在左侧有一个带有几个 stencil-route-link 的 sidenav，然后在右侧我应该显示路由组件。

【问题讨论】：

【解决方案1】：

您的项目中应该只有一个模板路由器组件。该组件控制与浏览器历史记录的所有交互，并通过事件系统聚合更新。

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

<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 将同时呈现 demos-page 和 Fiber-demo 组件。但是它们不会嵌套。

文档还提到了routeRender 属性，该属性可用于进行某种嵌套。例如：

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

【讨论】：

【解决方案2】：

由于 Stencil 团队对此仍有 not released a wiki entry，因此这里使用 @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 中定义它们。

【讨论】：

非常好。我试试看。

【解决方案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 交换组件的区域 - 回到原始问题，为了实现您想要的，侧面导航可能只是拥有一堆“模板路由器”的问题-link”（不必放置在同一个组件中 - 我有一个名为“sidenav-item”的单独组件，并且似乎运行良好）

【讨论】：