Router-lite href generation incorrect

vNext
1

My Routes:

{ 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:

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

Produces this in the code:

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

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

If I switch load with this:

href="members?daa=1"

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

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

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

This creates the same weird route as above:

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

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

2

Can you please try this?

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

This creates the same weird route as above:

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.

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

Sure.

Added this:

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

Get this:

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

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

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

5

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.

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.

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.

6

Cool, thanks for the explaining this :slightly_smiling_face:.

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.

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):

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

It produces this url:

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

Where as in router-lite

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

produces this:

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

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

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

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

1 Like