Search code examples
htmlhyperlinkanchorweb-component

Create an anchor link tag that just adjusts the hash without losing the query search string

Assume the current URL is: http://server.com/?key=value#/foo

In a normal anchor tag link, the following will just affect the anchor hash:

<a href="#/bar">LINK</a>

And the URL becomes: http://server.com/?key=value#/bar

However, I am adding links in a template in a web component that was imported from another .html file. Therefore, for the anchor hash to be relative to the loaded page instead of the component's html, I need to specify the link as follows:

<a href="/#/bar">LINK</a>

However, a link like this causes the query search string to be lost: http://server.com/#/bar

Is there a clean solution here? Workaround, of course, is to create a new element inherited from that manually updates the window.document.location.

Solution

  • I found a much cleaner solution to adding relative links in a new web component. Just add a:

    <base href="../../" />

    to the top of the component's .html file (assuming you keep your custom elements in an elements/element-name subdirectory) and then you can just add normal anchors such as:

    <a href="#/bar>LINK</a>

    And it will be created relative to the original app's URL instead of the component's html without losing the query string or reloading.

    Just remember that ALL links in the component will now be relative to the root of the app instead of the component, so other references may need to be updated accordingly.