Opening url in new tab results in error when the config.options.root is set

[fracz]

I'm submitting a bug report

• Library Version:
  1.1.1

Current behavior:
When router is configured with root path, e.g.

configureRouter(config: RouterConfiguration, router: Router) {
    config.options.root = '/some-root';
    // ...
}

Then the following link correctly instructs aurelia-router to open /some-root/some-page:

<a href="/some-page">Some page</a>

However, when the link is clicked with middle mouse button (open in new tab), it opens new tab with /some-page url instead of /some-root/some-page.

When I include the root path in the link

<a href="/some-root/some-page">Some page</a>

then aurelia tells me there is no such route and redirects to /some-root/some-root/some-page but middle-button click works.

Expected/desired behavior:
Aurelia should accept links with root inside href and ignore it. The href of navigation items from router.navigation should also contain the root path.

[rmja]

I am having the exact same problem. As a note, it happens only when pushState=true.

[EisenbergEffect]

Just checking, did you put a base tag on the page?

[fracz]

Yes, it is there

<base href="/some-root/">

I have just checked again that both <a href="/some-page"> and <a href="some-page"> are interpreted correctly by aurelia router (i.e. they open desired page) but only the second one works with middle-clicks.

However, the hrefs of items in the router are generated with the leading slash even if I define the root with trailing slash config.options.root = '/some-root/';.

[fracz]

The longer I think about it the more convinced I am that the problem would be solved if the router generated links without the leading slash. This applies to navigation items, router.generate method and route-href custom attribute.

[Mordred]

Any news about this? I'm using server-side rendering and this bug breaks all links for robots. Also users cannot use middle-click or open in a new tab.

[fracz]

Hi there!

I wonder if this behavior is hard to change or you just do not consider this as important flaw?

Also, I don't think that the question label is appropriate.

Thank you!

[fracz]

Temporary (I hope) fix for this issue: with support of arrive.js you can watch for new links with route-href and detect middle- or ctrl-clicks on them, replacing the URL for a moment. It lets the browser "do the right thing" and does not break the aurelia router.

import {RouterConfiguration} from "aurelia-router";

// temporary fix for https://github.com/aurelia/router/issues/457
export function supportMiddleClickInLinks(config: RouterConfiguration) {
  const addBaseUrlIfMiddleClick = (event: JQueryEventObject) => {
    if (event.ctrlKey || event.which == 2) {
      const link = $(event.currentTarget);
      const originalHref = link.attr('href');
      link.attr('href', config.options.root + originalHref);
      setTimeout(() => link.attr('href', originalHref));
    }
  };
  $(document).arrive("a[route-href]", function (newLink) {
    $(newLink).mouseup(addBaseUrlIfMiddleClick);
  });
}

Initialize it in your app.ts :

configureRouter(config: RouterConfiguration, router: Router) {
    // ...
    config.options.root = '/some-root';
    supportMiddleClickInLinks(config);
}

[funky-jojo]

@fracz - Thank you for posting this fix. This issue has been a severe pain, but your idea is working great.

[fracz]

Our users just reported that right click -> open in new tab still does not work. Have no idea how to workaround this...

[davismj]

@fracz can you point me to a working example?

[fracz]

Cannot create such example in Gist.run, because it's difficult to demonstrate URL roots there. However, I have extended the ScottWhittaker's Aurelia Router Demo by adding the following lines to the configureRouter:

config.options.root = '/aurelia-router-issue-457';
config.options.pushState = true;

See updated Gist: https://gist.github.com/fracz/92d3472cfb39c7233c6cc4fb031a4183
And deployed app: https://temp.fracz.com/aurelia-router-issue-457/

Try opening the links there in new tab.

Thank you for investigating this!

[fracz]

@davismj any progress with this issue? Thank you!