# Router-lite href generation incorrect

**URL:** <https://discourse.aurelia.io/t/router-lite-href-generation-incorrect/5183>\
**Category:** vNext\
**Created:** [June 20, 2023, 9:22am UTC](https://discourse.aurelia.io/t/router-lite-href-generation-incorrect/5183 "2023-06-20T09:22:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [June 20, 2023, 9:22am UTC](https://discourse.aurelia.io/t/router-lite-href-generation-incorrect/5183/1 "2023-06-20T09:22:21Z")

</div>

My Routes:

```auto
{ id: 'domains', path: 'domains', component: () => import('./resources/routes/domains'), title: 'Domains'},
{ id: 'members', path: 'members', component: () => import('./resources/routes/members'), title: 'Members' }

```

Anchor Tag on domains view:

```auto
...
<a load="route:members; params.bind: {daa: 1};">...</a>
...

```

Produces this in the code:

```auto
<a href="/#/domains/members(daa=1)"> ... </a>

```

This is incorrect. It should be: `/#/members?daa=1`

If I switch `load` with this:

```auto
href="members?daa=1"

```

Get an error as the `url fragement` is missing` in the route.

```auto
href="#/members?daa=1"

```

and click on it, then it navigates to the correct route. However, the url in the browsers url bar is this:

`http://localhost:9000/?daa=1#/members`

Further, If i try using `router.load`

```auto
this.router.load('members', {
  queryParams: { d1: 'test1' }
}

```

This creates the same weird route as above:

```auto
http://localhost:9000/?d1=test1#/members

```

What’s going in here? Am I doing something wrong?

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [June 20, 2023, 9:53am UTC](https://discourse.aurelia.io/t/router-lite-href-generation-incorrect/5183/2 "2023-06-20T09:53:55Z")

</div>

Can you please try this?

```auto
<a load="route:../members; params.bind: {daa: 1};">...</a>

```

> This creates the same weird route as above:
> 
> ```auto
> http://localhost:9000/?d1=test1#/members
> 
> ```

The positioning of hash is correct. At least that’s how the URL API formats the URLs. You can try this yourself.

```js
var u = new URL('https://example.com');
u.search = "d1=test1";
u.hash = "/members"
console.log(u.href); // https://example.com/?d1=test1#/members

```

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [June 20, 2023, 9:57am UTC](https://discourse.aurelia.io/t/router-lite-href-generation-incorrect/5183/3 "2023-06-20T09:57:27Z")

</div>

Sure.

Added this:

```auto
<a load="route:../members; params.bind: {daa: 1};">...</a>

```

Get this:

```auto
<a href="/?daa=1#/members"> ... </a>

```

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [June 20, 2023, 10:00am UTC](https://discourse.aurelia.io/t/router-lite-href-generation-incorrect/5183/4 "2023-06-20T10:00:15Z")

</div>

> [@Sayan751](#):
>
> The positioning of hash is correct. At least that’s how the URL API formats the URLs. You can try this yourself.
> 
> ```auto
> var u = new URL('https://example.com');
> u.search = "d1=test1";
> u.hash = "/members"
> console.log(u.href); // https://example.com/?d1=test1#/member
> 
> ```

Maybe I am misunderstanding, the hash should only be `#`, `members` is the route.

Should it not be: `https://example.com/#/member?d1=test1`

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [June 20, 2023, 5:47pm UTC](https://discourse.aurelia.io/t/router-lite-href-generation-incorrect/5183/5 "2023-06-20T17:47:53Z")

</div>

So here is what’s happening.

Your route does not contain a parameter; at least not the one you are binding to the `load`. Thus, these parameters are added to the querystring. Moreover, because you are preferring hashes in your URLs, your component routes/paths are appearing as URL hash. Now when everything is feed to the URL API, it looks loosely like below.

```js
var u = new URL('https://example.com');
u.search = "d1=test1"; //<-- the parameters as query
u.hash = "/members" // <-- the component path as route

```

Now when you ask the URL API to produce the final href it looks like below.

```js
console.log(u.href); 
// https://example.com/?d1=test1#/members

```

Note that, the URL API puts the hash at the end of the URL. That’s the standard way it formats the URLs. The router-lite does not have much influence on that, it just uses the URL API, as a standard way of parsing, and managing the URLs.

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [June 21, 2023, 6:57am UTC](https://discourse.aurelia.io/t/router-lite-href-generation-incorrect/5183/6 "2023-06-21T06:57:57Z")

</div>

Cool, thanks for the explaining this 🙂.

Now bear with me here, I do not think that this works for hash based routing.

When adding a hash using the `URL API`, it gets added to the end of the url string.

```auto
const url = new URL(
  "https://developer.mozilla.org/en-US/docs/Web/API/URL/href"
);
url.hash = Examples

console.log(url.href); 
// https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples

```

This is used to reference the element with an id set to `Examples` on the page.

Now what If I would like to do something like this in Aurelia (`example.com/#/home#examples`)?

Also there is an inconsistency when comparing to `@aurelia-router`

When using something like this (with hash based routing):

```auto
router.load('members', { parameters: { d1: 'test1' } })

```

It produces this url:

```auto
https://example.com/#/members?d1=test1

```

Where as in `router-lite`

```auto
router.load('members', { queryParams: { d1: 'test1' } })

```

produces this:

```auto
https://example.com/?d1=test#/members

```

Also the queryParams (`d1=test`) in the `members` route loading hook are missing

```auto
loading(params) {
  console.log(params) 
  // just an empty object although we navigated 
  // to this route using 
  // router.load('members', { queryParams: { d1: 'test1' } })
}

```

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [June 21, 2023, 8:05am UTC](https://discourse.aurelia.io/t/router-lite-href-generation-incorrect/5183/7 "2023-06-21T08:05:11Z")

</div>

We are also discussing this issue internally, and I am inclining towards changing this behaviour. Thanks for reporting this!