QueryParams ghosting on navigate

[mitchellwarr]

If you got to route '/route?param=12'

navigate('/route', false, { param: 12 })

Then navigate back to '/'

navigate('/')

then navigate to 'route' using

navigate('/route')

at this point useQueryParams remembers the old param as if its ghost data.

however, when you navigate back using

navigate('/route', false, {})

everything is fine

Shouldn't navigate with an empty params object clear the queryParams given that the url has no params. There is a disconnect that the url has no params but useQueryParams still returns a param

[drabelo]

Same issue here ....

[asaf]

@Paratron this is a big issue as state becomes inconsistent

[Paratron]

Hey there - I will take a look into it. Had very few spare time recently but am now back to fix some bugs and prepare v2 of hookrouter.

[asaf]

@Paratron good to have you back!

I'm not sure this has anything to do with navigate,

the problem is that queryParams.js builds the queryParamObject only once and the only thing that can change queryParamsObject is setQueryParams

But URL may change (not only though navigate but through browser back/forward buttons as well), which will ghost previous queryParamObject even though url may not contain these query params any longer.

this could be solved by intercepting location.pathname and re-build the query params object whenever it changes.

Couldn't find a native way to do this, but submitted a PR with a tracking concept for a review

Thanks!

[mitchellwarr]

You could have a useEffect that listens to pushState changes and then updates the queryParams state object as an override.

useEffect(
  () => {
    let cb = (...args) => update.current(...args);
    window.addEventListener("hashchange", cb, false);
    return () => {
      window.removeEventListener("hashchange", cb, false);
    }
  },
  []
)

This is a snippet from a hook I made for a locationHash hook. update.current is a ref callback function. The same idea should apply here right? Swap out hashchange with pushState listeners?

I'm sorry but I'm not in a position to test this or play around with it right now, so this is just theory

[asaf]

@mitchellwarr ye i thought about it but I don't think that's gonna work because hashchange is only invoked when # is changed and I couldn't find an event listener for URL.pathname changes.

[mitchellwarr]

@asaf I was about to comment with popstate, but it looks like you have it covered in this pr 👍

[asaf]

@Paratron its been few months already, is this project dead?

[Paratron]

I have nearly zero free time to work on the project, but its not dead.