Reactivesearch: URLParams not able to work with react HashRouter

[AlloVince]

Issue Type: BUG

Platform: Web

Description:

My project is using react HashRouter, so the expected URL should as index.html#/search?q=foo

In reactivesearch, I saw the URLParamsProvider hard code params from window.location.search, in this case, window.location.search will be always empty, so URLParams not able to work with react HashRouter

In project searchkit, there is a getLocation callback to handle all url before changing window.location, maybe this is a solution to fix this issue.

Looking forward this issue be fixed.

[metagrover]

Thanks for filing this. I will take a look at it today.

[metagrover]

Added two new props for complete customisations:

- getSearchParams: Function [optional]
Enables you to customise the evaluation of query-params-string from the url (or) any other source. If this function is not set, the library will use window.location.search as the search query-params-string for parsing selected-values. This can come handy if the URL is using hash values.

- setSearchParams: Function [optional]
Enables you to customise setting of the query params string in the url by providing the updated query-params-string as the function parameter. If this function is not set, the library will set the window.history via pushState method.

Find docs here: https://github.com/appbaseio/reactive-manual/blob/v3/content/getting-started/ReactiveBase.md#props

[metagrover]

Released in v3.0.0-beta.1

[AlloVince]

Added two new props for complete customisations:

- getSearchParams: Function [optional]
Enables you to customise the evaluation of query-params-string from the url (or) any other source. If this function is not set, the library will use window.location.search as the search query-params-string for parsing selected-values. This can come handy if the URL is using hash values.

- setSearchParams: Function [optional]
Enables you to customise setting of the query params string in the url by providing the updated query-params-string as the function parameter. If this function is not set, the library will set the window.history via pushState method.

Find docs here: https://github.com/appbaseio/reactive-manual/blob/v3/content/getting-started/ReactiveBase.md#props

Thanks for your quick response

[philohelp]

Hi! Sorry I'm still pretty new to reactive search, what should the function return ? An object with field and selected values, like { "data_field": ["value1", "value2"...] } ?

[AlloVince]

Hi! Sorry I'm still pretty new to reactive search, what should the function return ? An object with field and selected values, like { "data_field": ["value1", "value2"...] } ?

If you want to support HashRouter, could use it as follow

getSearchParams={() => window.location.hash.split('?')[1]}

[philohelp]

Oh thanks. Actually, using react-router, I'm trying to build a url by myself, then history.push(the_url), then see the results.
This works when I type it in my browser : http://localhost:3000/alt?authorfilter=['Thpo']
But this : <Link to={{ pathname: "/alt?authorfilter=['Thpo']" }}>Hello</Link> or this : history.push("/alt?authorfilter=['Thpo']") is transformed into this encoded thing :http://localhost:3000/alt?authorfilter=[%27Thpo%27] which wont activate any search.

[AlloVince]

I think the easiest way is not build url params your self, open all components URLParams, then just copy the url generated by components :)

[metagrover]

If you are using the getSearchParams, you will also have to use setSearchParams to set the URLParams with the desired format.

[rohanbhangui]

can we perhaps see examples of these functions in action?

[aikodeio]

@rohanbhangui i need the same

[stefanlesik]

I'd like to see an example of getSearchParams and setSearchParams please @metagrover