Hi folks, I came across a scenario and wanted to know if its the default behaviour and if there are any work around for this scenario.
I have a nav bar in which the different nav links are elements. In this nav bar, I have two nav links that have the same route, but one of them alone has a query param.
e.g.
<LinkTo @route="A">Route A</LinkTo>
<LinkTo @route="A" @query={{hash type="sampleType"}}>Route A - Sample Type</LinkTo>
The issue I am facing is that, when I click on the second LinkTo element the url of the first LinkTo element becomes the same as the second one.
E.g. http://baseurl.com/A?type=sampleType
Is this a common behaviour, is there any workaround for this?
Currently I am using anchor tags by setting the urls, to overcome this behaviour. I didn’t want to use actions to redirect, as I wanted the users to be able to use ctrl + click to open links in new tabs if needed.
Sounds like you’re encountering Ember’s weird and kinda unexpected “sticky” query params.
From the (old) docs:
If you wish to reset a query param, you have two options:
- explicitly pass in the default value for that query param into
link-to or transitionTo.
- use the
Route.resetController hook to set query param values back to their defaults before exiting the route or changing the route’s model.
A third option might be to build your own link instead of using LinkTo, but I’d use caution as you’d probably need an addon to make that more ergonomic, and you may end up having to explicitly set the QP in your link anyway as in option 1.
It’s a little difficult to say what makes the most sense in your case, but one option would be #1 above which is something like:
<LinkTo @route="A" @query={{hash type="whateverTheDefaultValueIs">Route A</LinkTo>
<LinkTo @route="A" @query={{hash type="sampleType"}}>Route A - Sample Type</LinkTo>
It’s easier to think of query params in Ember as stateful and dynamic rather than static. I personally think Ember QPs are kinda strange and sometimes buggy and not super easy to manage, and there are some routing system overhauls planned in the near future IIRC, but for now this is what we’re working with.
1 Like
Hi @dknutsen , thanks for the reply. Nice to know about the sticky query params feature of ember.
In my use case one of my links doesn’t have any query params, I tried setting some empty values for that route and that page was breaking up. For now I am going with anchor tags, I will try step 2 if possible.
I sure miss not using the Link-To elements as I wont have to reload a lot of static files.