[SOLVED] Is it possible to rewrite URL using <app-route>?

Is it possible to rewrite URL using <app-route>?

Consider I want to rewrite a URL from /register to /tenant/register, where:-

/register does not have an actual view, as it only serve to make URL nicer.
/tenant/register is the actual view, with a <my-tenant-register> view element.

Is it possible to rewrite URL using <app-route>? So that it can sort of have a virtual path and redirect to app-route accordingly with certain rules.

Solution

Taking PSK as an example, we need to add a path-changed listener in <app-location> as follow:-

<app-location id="location"
    route="{{route}}"
    url-space-regex="^[[rootPath]]"
    on-path-changed="rewritePath">
</app-location>

Then define the rules for the rewritePath() as follow:-

/**
 * Rewrite path before passing to <app-route>
 */
rewritePath() {
  let location = this.$.location;

  let path = location.path;
  if (path == '/register') {
    location.path = '/tenant/register';
  }
}