Working with Routing & window.history.pushState

Hello, I have Routing turned on.
I am trying to have a button/link use the same query string that is in the address bar.
Using URLSearchParams(window.location.search), it will pull the query string that the page loads with, but I want it to also update like the url in the address bar does when more information is typed into the search box. Is this possible?
Does anyone know how I would accomplish this?

Hi @Kevin_C,

Would it be possible to create a codesandbox to demonstrate your issue with the button?

We have starter templates for our Instantsearch clients here.

This will allow us to troubleshoot your issue easier.

Here is a very rough version of an example: https://codesandbox.io/s/dreamy-saha-8qskq
I want the ARROW image to have the same query string as what gets updated in the address bar as you type in the search.

If you type something into the search and click the refresh, you can see that the arrow is getting the updated href, but I want the link to change as the search field gets typed into.
I hope I’ve explained it enough.
Thanks, Kevin.

Hi Kevin, I’ve forked your codesandbox and I think this is what you are trying to do.

You can find more information here.

Let us know how that works for you!

I get an error on this line when I add this to my code:
const url = ${baseUrl}?q=${routeState.instant_search.query}&page=${ routeState.instant_search.page };
Error: Uncaught (in promise) TypeError: Cannot read property ‘query’ of undefined.

I am using instantsearch.js v4 if that matters.

Nevermind, I forgot to change the indexName onf these values.

Hi @Kevin_C, glad you figured it out. Did you get it working?

Yes, thank you for the help!

@Kevin_C, My pleasure!