Javascript 在hyperHTML和hyperHTML应用程序中使用链接进行导航

我只是从hyperHTML开始。我正在构建一个需要路由的小应用程序，所以我将它与hyperhtml应用程序相结合

我试图在视图上设置click处理程序来处理锚元素上的点击，并让它们与路由器一起导航。下面的工作，但它似乎是一个复杂的，我想我错过了一个更好的方式来做它。你能建议一个更好的方法吗

import hyper from 'hyperhtml';
import hyperApp from 'hyperhtml-app';

const app = hyperApp();

class Welcome extends hyper.Component {
  render() {
    return this.html`
      <h1>Welcome</h1>
      <a href="/settings" onclick=${this}>settings</a>
    `;
  }

  onclick(e) {
    if (e.target instanceof HTMLAnchorElement) {
      e.preventDefault();
      app.navigate(e.target.attributes.href.value);
    }
  }
}

class Settings extends hyper.Component {
  render() {
    return this.html`<h1>Settings</h1>`;
  }
}

app.get('/', () => hyper(document.body)`${new Welcome()}`);

app.get('/settings', () => hyper(document.body)`${new Settings()}`);

app.navigate('/');

从“hyperhtml”导入超链接；
从“hyperhtml应用程序”导入hyperApp；
常量app=hyperApp（）；
类欢迎扩展了hyper.Component{
render（）{
返回this.html`
欢迎
`;
}
onclick（e）{
if（例如HTMLanchoreElement的目标实例）{
e、 预防默认值（）；
app.navigate（e.target.attributes.href.value）；
}
}
}
类设置扩展了hyper.Component{
render（）{
返回此.html`Settings`；
}
}
app.get（'/'，（）=>hyper（document.body）`${new Welcome（）}`）；
app.get（'/settings'，（）=>hyper（document.body）`${new settings（）}`）；
应用程序导航（“/”）；

路由器的用途是为您处理导航

实际上，只有当您不希望路由器工作时，才需要使用默认设置

我已经创建了一个可以显示完全相同的代码，甚至不需要点击

最后一点要注意的是，如果要保持前几页的状态，可能需要对它们进行一次寻址，然后在每次渲染时重用它们

const page = {
  welcome: new Welcome,
  settings: new Settings
};

app.get('/', () => hyper(document.body)`${page.welcome}`);

app.get('/settings', () => hyper(document.body)`${page.settings}`);

如果你有任何其他问题，请不要犹豫

---

关于

他们路由器的目的是为您处理导航

实际上，只有当您不希望路由器工作时，才需要使用默认设置

我已经创建了一个可以显示完全相同的代码，甚至不需要点击

最后一点要注意的是，如果要保持前几页的状态，可能需要对它们进行一次寻址，然后在每次渲染时重用它们

const page = {
  welcome: new Welcome,
  settings: new Settings
};

app.get('/', () => hyper(document.body)`${page.welcome}`);

app.get('/settings', () => hyper(document.body)`${page.settings}`);

如果你有任何其他问题，请不要犹豫

---

问候

啊！所以它为我捕捉了导航的东西。谢谢你澄清此事啊！所以它为我捕捉了导航的东西。谢谢你澄清此事DIf评分，请留下评论，如果可以，我会澄清问题。如果评分，请留下评论，如果可以，我会澄清问题。