Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Popstate events doesn't call hooks when url have query string

See original GitHub issue

The problem

when using back / forward while the url have a query string, barba doesnt fire any events, therefor we cant get the https://barba.js.org/docs/advanced/hooks/#data-properties data.trigger to manually force reload the page.

Steps to reproduce issue [ Good To Have ]

setup barba hooks before, after and log their data
create 3 links 2 with a query string & 1 without
click the normal link first
then click the 2 qs links
now press the back btn and check ur console
url will change but the hook events wont fire, only when u get to the normal url, something will be logged.

Environment

Barba version that exhibits the issue: "@barba/core": "^2.9.7",
Build used:
- module (esm/)
- browser (dist/)
- main (lib/)
Browser OS/version used: OSX 10.14.6 / Chrome 83.0.4103.97

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:18 (9 by maintainers)

Top GitHub Comments

2reactions

ctf0commented, Jun 23, 2020

no difference unfortunately, when pressing back the url gets changed but no network call is made.

i believe barba doesnt currently have a solution for that, still many thanks for you help.

1reaction

xavierfoucriercommented, Jun 17, 2020

@ctf0 thanks for the repo, I will give a feedback as soon as possible! 😉

Top Results From Across the Web

Window: popstate event - Web APIs | MDN

The popstate event of the Window interface is fired when the active history entry changes while the user navigates the session history.

HTML5 History API: "popstate" not called when navigating ...

So it looks like popstate is only called when navigating to different urls within the same document.

useState with URLs: How to persist state with useSearchParams

This post demonstrates a simple React Hook that stores state in the URL query string, building on top of the React Router useSearchParams ......

Router · ReasonReact

Upon url change, calls the callback and passes it the ReasonReactRouter.url record. ReasonReactRouter.unwatchUrl(watcherID) : stop watching for url changes.

InstantSearch.js | Algolia

instantsearch({ indexName: string, searchClient: object, ... Call this method after you have added all your required widgets to instantsearch .