带有hyperHTML和hyperhtml-app链接的导航

Question

我刚从hyperHTML开始。我正在构建一个需要路由的小应用程序，所以我已经将它与hyperhtml-app连接起来了。

我试图在视图上设置单击处理程序，以处理对锚元素的单击，并让它们与路由器导航。以下的工作，但这似乎是一个错综复杂的，我认为我错过了一个更好的方式来做。你能提出更好的办法吗？

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('/');

Answer 1

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

实际上，只有当您不希望路由器工作时，才需要preventDefault。

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

最后请注意，如果您想保持前几页的状态，您可能应该对它们进行一次寻址，并在每次呈现时重复使用它们。

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

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

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

如果你还有其他问题，请不要犹豫。

问候