flow-and-components-documentation icon indicating copy to clipboard operation
flow-and-components-documentation copied to clipboard

Unable to resolve routes with special characters

Open Artur- opened this issue 5 years ago • 1 comments

I would assume this should succeed

    it("should resolve routes with special characters", async () => {
      const resolver = new Resolver([
        { path: "/ab", action: () => "a" },
        { path: "/a b", action: () => "b" },
        { path: "/a b (c)", action: () => "c" }
      ]);
      expect((await resolver.resolve("/ab")).result).to.be.equal("a");
      expect((await resolver.resolve("/a b")).result).to.be.equal("b");
      expect((await resolver.resolve("/a b (c)")).result).to.be.equal("c");
    });

but it fails with

Error: [Vaadin.Router] Page not found (/a b (c))

Artur- avatar Jan 30 '20 14:01 Artur-

This is expected behavior in Vaadin Router since it uses path-to-regexp for the route path syntax, and that treats (, ), and a few other characters specially. If you need to include a ( literally, it needs to be escaped with a back slash: '\\(' (which itself has to be escaped in JS literal strings).

Here is the relevant group of unit tests: https://github.com/vaadin/vaadin-router/blob/master/test/resolver/matchPath.spec.js#L289

The real issue here is that neither Vaadin Router's docs, nor Flow docs explain the syntax.

vlukashov avatar Feb 03 '20 13:02 vlukashov