CODEWITHSUNDEEP
javascriptroutesvaadinweb-componentnative-web-component
Cenasa
Cenasa

Reputation: 601

Vaadin Router: Route Parameters into the address bar not working

I am building an application with Web Components and use Vaadin Router for the routing. I have the following project structure:

index.html

<html>
  <head>
     <script type="module" src="app/app.module.js"></script>
  </head>
  <body>
     <mp-app-root></mp-app-root>
  </body>
</html>

app.module.js (vaadin router):

(...) multiple imports
import {Router} from '../vaadin-router.js'

// select the DOM node where the route web components are inserted
const outlet = document.querySelector('mp-app-root');

// create a router instance and set the routes config
const router = new Router(outlet);
router.setRoutes([
    {path: '/meals', component: 'mp-meal-module'},
    {path: '/meals/:id', component: 'mp-meal-detail-module'},
]);

So far, vaadin router displays every component in the mp-app-root tag.

The routes are working fine, when I am calling the URLs via <a>-Tags. But if I paste the url into the address bar or on page reload (e.g. http://127.0.0.1:8081/meals/1) the components do not load and I am getting the following errors:

Uncaught SyntaxError: Unexpected token '<'`

and

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Upvotes: 1

Views: 1082

Answers (1)

anasmi
anasmi

Reputation: 2652

This seems to be similar to the issue described here Unexpected token < error in react router component (Not a vaadin related).

A solution would be to add a <base href="/"> to your index.html file. The same approach is used in the tutorial of the Vaadin Router :)

Upvotes: 2

Related Questions