-
Notifications
You must be signed in to change notification settings - Fork 157
v2 routing issue with going back #589
Comments
I have not tried it out yet, but have you tried making the whole routing object in data, instead of creating it in the template? I think you might have an infinite loop situation like described in earlier issues here 🤔 |
I just tried your suggestion and no luck |
When I try your repository out, I have a hard time trying to replicate what behaviour you mean. Can you maybe make a video or something of the misbehaving behaviour? Thanks! EDIT: I didn't realise you were talking about the browser back button |
We currently have an issue with the
Once the “Back” button is pressed the URL will come back to the previous state and if we mount the widget again the state is the correct one. One other use case is to use the lib with a built-in router (e.g. Vue Router). With this case the fact that the router write to the URL is an issue because it push one “useless” entry inside the history. The URL goes from:
Vue Router detect a page change with the We don’t have a solution yet. A workaround is to disable the What you can do in your case is the following:
However, this workaround will only work once we do a small change in I hope that this is clear, me and @samouss have been trying to find a solution for both use-cases for the whole day now and this was the best we could find. |
Just to let you know, I really appreciate the effort you guys put in for every request/issue that gets posted. After your last comment, I'm starting to understand the issue. In the image below, I print the pathname at the top of the write call. When I filter a refinement, it runs and shows /inventory, which is good. But after when I switch pages to /about-us, this function also runs. Not only that, it runs like 15 times which I don't know why. The solution that required the least amount of work for me was to wrap the router.push method in a conditional that only runs if current page is also the search page. In my example that's /inventory. I haven't checked every use case, but it seems to be working fine for me. write: routeState => {
if (window.location.pathname === '/inventory') {
this.$router.push({
query: routeState,
})
}
} A more universal solution would be to add a Boolean argument to the write call that would be true if the current page is the search page. ie (routeState, isSearchPage) => |
Right, that makes sense. I’m not exactly sure how you got in a situation where there would be 15 calls, but we always recommend to debounce the URL synchronisation, since it’s notoriously slower than DOM updates; that could be a cause of your over push. |
I've ran into more routing troubles. I have a panel with more filters that gets shown and hidden by a button using v-show. When I get to the search page with a filter already in the query, I can only add more filters to it and every time I remove that filter and close the panel, my filter gets reapplied. This is using default router + state mapping. https://res.cloudinary.com/driverseat/video/upload/v1543645338/router_s4qbjo.mov |
I'm having the same issue as @alexbudure described later. If the URL is loaded with some filters query params, even if I remove all filters, and afterwards apply new filters the ones that were loaded with the URL, will keep and only add the new ones. In other words, it's only possible to add new filters and not change them. It was working with v2 before, it stopped working after I've updated for the last version. |
Can you make a sandbox with reproduction that it worked before? I don’t see any code that could’ve influenced that behaviour |
@Haroenv I'll try to create a sandbox to reproduce, for now I made 2 videos, one that is in production with the previous version of the code, and one that is in local env with the new version of the code. |
@Haroenv , I believe this might be something related to the use of vue-router and the routing method mentioned in the docs. I looked at @alexbudure code, and he uses the vue-router as well. I'm trying to create a codesandbox but it´s not loading correctly the beta version of vue-instantsearch. So i'm not sure if we missed something on the docs. Because it was not clear the proper way to do it when we have both routers. |
I have not been able to dive more deeply into it, but there's definitely something going wrong, although I'm not sure what yet. I wonder if you could avoid the issues by using the |
I've spent some time today looking at the same issue. I think the problem is in instantsearch.js I tried swapping out the history router for a custom router as detailed on and by copying the demo linked at the bottom here (which is broken as I write this): When logging out the functions as they happen the write (and other functions) happen multiple times. |
I also have the issue, go back button needs to be clicked twice or more times. Sometimes it just changes the window scroll position. Sometimes it doesn't do anything. I think I know what the problem is. I am manipulating what happens is the route changes to show a new product, when it's shown, the filters are applied which in turn push another history state, which makes two states for one click This is the general component structure:
As you can see, product page and feed are parallel. Which means the product page can change to a different product, but the feed doesn't reload. Instead, I am requesting results from Algolia with a watcher in feed component:
while "filterByRoute" does something like this:
I am not sure why facetFilters changes are reflected in $router state (if they are), the URL of the page does not change. Also, I don't have an idea at the moment how this could be done differently. I would like Algolia not to push $router or history states, unless the URL actually changes. |
Update. I have a partial solution. I am changing facet filters in
This solved the problem, but it's also a limitation to how we can use Algolia... |
Update II Again things are not working as expected:
|
@mateuszgwozdz, could you make a sandbox which replicates the issue? Having a duplicate entry in the history when removing the component is confusing for sure, but we are forced to do it as far as I can see. If we don't add an entry when someone unmounts the component without changing the route, there'll be a stale URL, if they update the url manually, it'll have a duplicate URL. I'm not sure if |
@Haroenv thanks a lot for getting back to me quickly!
Is there any simpler way we can solve this? This would be quite tedious... What should be included in the sandbox? How can I share it with you confidentially
The back button is very imporant element of any user interface. How else can we make the go back button work as expected? f.e. Shift multiple states back at once?
the component is not unmounted
I did that. Here's some documentation https://router.vuejs.org/api/#replace
The problem persists. I don't understand why the state has to be pushed, is there a way to disable this behaviour? |
You can disable the pushing of the URL, where there would be only one search URL saved to the page, which then would however replace the last history element on the site (that's how replace works), by in the page w write(routeState) {
- vueRouter.push({
+ vueRouter.replace({
query: routeState,
});
}, |
It's working now. Sorry. I must have made a mistake somewhere.
|
What's the current status on this? I'm using InstantSearch and I have to click twice to go back to the previous page. |
@MaxHalford, the current solution is to use a custom router (which can be the same as the real |
do you have an example of this you could share? also dealing with a similar issue |
Also experiencing this issue in v3.6 Have to press back twice to go back to the previous state. This seems to be because on page load it adds the current url to the history so then when pressing back fir the first time then it just goes back to itself. I copied the historyRouter and removed I did manage to workaround this issue by wrapping the I copied this file
with this:
Not quite sure on the implications of this and if it may affect anything else but from the testing I have done this seems to have solved the issue for me. |
yes, checking whether the url has already been changed is a good call, thanks @nadge |
thanks @nadge, was trying to chase this issue down and this was an easy fix. |
You can also try window.history.replaceState, replace not push. if (_this2.shouldPushState && lastPushWasByISAfterDispose) { or if(url !== window.location.href){ |
In the latest version of InstantSearch / Vue InstantSearch this issue is fixed actually: algolia/instantsearch#5004 (4.38.1 of InstantSearch.js) If you have a new issue, please open it up again :) |
Feedback on the v2 prerelease version 🆕
When synchronizing with Vue Router, there's a bug when navigating between the pages. For example, if I'm on the search page and I go to another page (ie /about-us) and then try to go back, it takes two back button clicks to get back. Sometimes on the first back button click, the query from the search gets added to the current page (ie /about-us?{query}) and then finally on the second back button click it takes you back to the search page.
Another thing I've noticed, which might be related to the problem above, is that if you're on the search page and you click a link with a query from the nav bar (ie vehicles over 9000) the search results do not respond to changes in the URL.
What is the version you are using?
v2.0.0-beta.1
The text was updated successfully, but these errors were encountered: