Navigation avec des liens dans hyperHTML et hyperhtml-app

Question

Je commence juste avec hyperHTML. Je construis une petite application qui nécessite un routage, donc je l'ai couplé avec hyperhtml-app.

J'essaie de configurer le gestionnaire de clic sur une vue pour gérer les clics sur les éléments d'ancrage et les faire naviguer avec le routeur. Les travaux suivants, mais il semble une alambiquée et je pense qu'il me manque une meilleure façon de le faire. Pouvez-vous suggérer un meilleur moyen?

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

Le but de leur routeur est de gérer la navigation pour vous.

Vous ne devez en fait empêcher DEFAULT que si vous ne voulez pas que le routeur fonctionne.

J'ai créé un Code Pen example qui affiche exactement le même code sans même déranger le clic.

Comme dernière remarque, si vous voulez conserver l'état des pages précédentes, vous devriez probablement les adresser une fois et les réutiliser pour chaque rendu.

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

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

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

Si vous avez d'autres questions s'il vous plaît ne pas hésiter à demander.

Cordialement