javascriptvaadinweb-componentbrowser-syncvaadin-router

Vaadin Router (non-java) Address Bar Entry not working

Attempting to create a Single Page Application using Vaadin-router and Web Components. Everything works with normal navigation. However, when typing a valid address into the address bar, I get the following output to the screen and no error in the console.

Cannot GET /users

I have reviewed this question, but doesn't appear to help: Vaadin Router: Route Parameters into the address bar not working

Am I wrong in thinking that I should be able to type in an address and navigate to the resource?

Typical setup from tutorials: with the following versions:

package.json

  "name": "rollup-dependencies",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.0.0",
    "rollup": "^2.52.8"
  },
  "dependencies": {
    "@vaadin/router": "^1.7.4",
    "lit-html": "^1.4.1",
    "redux": "^4.1.0"
  }
}

app.js - routes


import "../views/HomeView.js";
import "../views/NotFoundView.js";
import "../views/UserListView.js";

// select the DOM node where the router inserts route Web Components
const outlet = document.getElementById('outlet');
const router = new Router(outlet);
router.setRoutes([
    {path: '/', component: 'x-home-view'},
    {path: '/users', component: 'x-users-view'},
    {path: '/users/(.*)', component: 'x-user-not-found-view'},
    {path: '(.*)', component: 'x-not-found-view'},
]);

index.html

<!DOCTYPE html>
<html>

<head>
    <title>[WebStandards template]</title>
    <link rel="stylesheet" href="./content/css/style.css">
</head>

<body>
    <base href="/">
    <a href="/">Home</a>
    <a href="/users">All Users</a>
    <a href="/users/kim">Kim</a>
    <a href="/about">About</a>
    <div id="outlet"></div>

    <script src="./content/scripts/app.js" type="module"></script>
</body>

</html>

WebComponents are not present here for brevity. However, they are present in the code, and clicking the links navigates to them successfully.

Solution

  • You need to handle those paths in your backend server, so as they return the same index.html content than it is returned when path is ' /'.

    Think that vaadin-router works in client side, and by using javascript API it replaces the content with the web-component and updates the url, but it does not send the request /users to the server.

    Otherwise when you type /users in the URL your browser leaves the current page and sends the request to the backend, which does not have any page to return with that path