Навигация по ссылкам в hyperHTML и hyperhtml-приложении

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

Назначение маршрутизатора - управлять навигацией за вас.

На самом деле вам нужно предотвращать дефолт только тогда, когда вы не хотите, чтобы маршрутизатор работал.

Я создал пример Code Pen, который показывает ваш точно такой же код, даже не нажимая на клик.

Как последнее замечание: если вы хотите сохранить состояние предыдущих страниц, вам, вероятно, следует обратиться к ним один раз и просто повторно использовать их для каждого рендера.

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

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

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

Если у вас есть другие вопросы, пожалуйста, не стесняйтесь спрашивать.

С уважением