How to use URL parameters with router in Vaadin Fusion?

Question

I tried to follow the guide at Question, which results in a

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

My configuration is

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

Is there an example, how to solve this? Do I need to handle this in the MainView (I follow the todo-tutorial on vaadin.com?

Answer 1

It seems you have run into an issue with the starter. In main-view.ts, it loops over the routes with a title and tries to create a link for each in the menu:

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

However, router.urlForPath() breaks when there is a URL parameter definition instead of an actual parameter (items/:item instead of items/2).

A quick fix for this would be to remove the title property from your route configuration for any route that has a parameter.

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