flow: does not link to

Normally, when I create <a href="#anchor"> in an HTML page, this will cause there to be link pointing to <a name="anchor"> in that same page. So, for example, if you’re on https://localhost:8080/my-page, then clicking the link will take you to https://localhost:8080/my-page/#anchor.

However, in ~Hummingbird~ (now known as Flow), when you create <a href="#anchor"> on https://localhost:8080/my-page, clicking the link will take you to the root of the site instead, to https://localhost:8080/#anchor. This is not expected behavior.

Please make it behave like on a normal site.

About this issue

  • Original URL
  • State: open
  • Created 7 years ago
  • Reactions: 5
  • Comments: 15 (10 by maintainers)

Most upvoted comments

I feel that mixing Flow navigation in here is overkill. Developers are looking a quick way to let users navigate within the current page/view.

Code like this should work just like it works in browsers (without any Flow navigation/events happening):

Link link = new Link("View feedback","#feedback");
myView.add(link); 

This happens because there’s a <base href="[site root]"> on the page. It affects how all relative URLs are resolved, including URLs like #anchor.

Which is better?

  • All relative URLs on the page are resolved relative to that page. This means that all resources that are used on multiple pages would have to be defined using absolute URLs.
  • All relative URLs on the page are resolved relative to the root of the site. This means that instead of #anchor, you’d need to write my-page#anchor.

Right now #anchor links do not work in Flow-managed pages. I do not think this is acceptable:

  • this includes both the links that the developers create themselves and the links that are created by third-party web components
  • while it is theoretically possible to force all Flow developers to change their way of creating #anchor links, it is not possible to do that with third-party web components

Supporting navigation links is a valid use case but there are ways to implement it without introducing the <base> tag (that is, without breaking #anchor links).

Please consider custom URL resolution logic for links with the router-link attribute. They are anyway handled differently (do not trigger a page reload), so they do not have to follow the <base> URL. In this scenario there would be no <base> URL on the page (unless the developer explicitly adds it), #anchor links would keep working as they always have been, and in-app links would work as well since they would implicitly resolve relative to the application root regardless of the current page route.

Also, if I need to write my-page#anchor, but I do not know what page I’m on (because I’m in a dynamically populated template that is used on multiple pages), how do I find out the correct value for my-page?