Comment utiliser les paramètres URL avec un routeur dans Vaadin Fusion ?

Question

J'ai essayé de suivre le guide à Question , ce qui se traduit par une

mobx.esm.js?4fd9:2362 [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[MainView.update()]' TypeError: Expected "item" to be a string

Ma configuration est la suivante

path: 'item/:item',
component: 'item-view',

Existe-t-il un exemple de solution ? Dois-je gérer cela dans le MainView (je suis le todo-tutorial sur vaadin.com) ?

Answer 1

Il semble que vous ayez rencontré un problème avec le démarreur. Dans ce cas, il s'agit d'un problème de démarrage. main-view.ts Il passe en revue les itinéraires avec un titre et tente de créer un lien pour chacun d'entre eux dans le menu :

${this.getMenuRoutes().map(
  (viewRoute) => html`
    <vaadin-tab>
      <a href="${router.urlForPath(viewRoute.path)}" tabindex="-1">${viewRoute.title}</a>
    </vaadin-tab>
  `
)}

Cependant, router.urlForPath() s'interrompt lorsqu'il y a une définition de paramètre URL au lieu d'un paramètre réel ( items/:item au lieu de items/2 ).

Une solution rapide à ce problème consisterait à supprimer l'option title de votre configuration d'itinéraire pour tout itinéraire comportant un paramètre.

{
  path: 'item/:item',
  component: 'item-view' 
  // make sure there is no title here
}

Answer 2

Le problème est que main-view.ts dans le projet de démarrage a une logique qui essaie de lister tous les itinéraires de navigation afin de générer des liens pour eux. Actuellement, cette logique n'est pas assez intelligente pour détecter et ignorer les itinéraires dont les paramètres ne sont pas optionnels.

L'erreur est provoquée par router.urlForPath(viewRoute.path) lorsque le path a des paramètres de route non optionnels parce qu'ici nous ne spécifions pas quelle doit être la valeur du paramètre de route (pour l'URL générée). Pour générer une URL pour le chemin 'item/:item' il devrait faire quelque chose comme router.urlForPath('item/:item', { item: 'my-item' }) .

La solution rapide (retirer le title de la définition de l'itinéraire) suggérée par Marcus fonctionne parce que le main-view.ts a la logique de sauter tous les itinéraires qui n'ont pas de title . Vous pourriez modifier cette logique pour passer également par d'autres critères ou vous pourriez essayer d'inclure des valeurs pour les paramètres de l'itinéraire (pour des itinéraires spécifiques) si vous voulez vraiment générer des liens de navigation fonctionnels pour ces itinéraires.

Une autre solution consisterait à indiquer que le paramètre de l'itinéraire est facultatif (au cas où vous souhaiteriez que l'itinéraire soit également accessible sans paramètre) en ajoutant un point d'interrogation après le paramètre, de sorte que le lien puisse être généré sans qu'une valeur soit spécifiée pour le paramètre.

{
  path: 'item/:item?', // <- optional route parameter
  component: 'item-view',
  title: 'Hello World',
}