Javascript 如何通过'；历史'；对象到stencil.js组件<；模具路由器>；

我需要在组件（

）中使用历史对象，该组件呈现为

然而，根据我遵循的一些教程，我完全无法将历史记录（Appnav）注入组件。我总是得到一个未定义的日志

结构如下：

应用程序根目录.tsx

知道我为什么总是不确定吗？ 提前感谢您

编辑： 对不起，我应该更仔细地查看您的代码，您确实有RouterHistory-那么它不起作用的原因可能是您的组件（应用程序导航）在“模具路由器”之外（需要通过模具路由引用组件组件道具-也可能与路由器（）道具一起工作？）

（添加上述编辑之前的原始响应）

对于v1路由器，您可以将路由历史作为道具传递给组件（组件需要包含在模具路由中，您无需显式传递-模具在幕后为您传递）

---

我认为

injectHistory

仅在路由器的v2版本中可用。

export class AppRoot {

  render() {
    return (
      <div>
        <header>
          <h1>Stencil App Starter</h1>
        </header>

        <main>
          <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-switch>
          </stencil-router>
          
          <app-nav></app-nav>


        </main>
      </div>
    );
  }
}

import { Component, h, Prop } from '@stencil/core';
import { RouterHistory, injectHistory } from '@stencil/router';

@Component({
  tag: 'app-nav',
  shadow: false,
})
export class Appnav {
  @Prop() history: RouterHistory
  render() {
    return (
      <div class="app-nav">
        <p>
         Mi navegacion 3
        </p>
        <button onClick={()=> this.draw()}>log history</button>
      </div>
    )
  }

  draw(){
      console.log(this.history);      
  }
}

injectHistory(Appnav)

"@stencil/core": "^2.0.0",
"@stencil/router": "^1.0.1",
"@stencil/store": "^1.4.1",
"@stencil/utils": "0.0.5",
"workbox-build": "^4.3.1"

import { RouterHistory } from '@stencil/router';
@Prop() history: RouterHistory;

...

//then use it to manipulate history (say bound this function to button click)
goBackHistory() {
  this.history.goBack();
}