Search UI is not suupoting hashing in url

Elastic Stack Elasticsearch
1

We are using search ui library that allows to quickly implement search experience leveraging Elasticsearch.

We have used hashing in the url routing (which generate the url like this http://www.example.com/#/Search, it is to load search component) and we have also enabled the trackURLState in the config of searchUI, so, on the click of back/forward button of browser, searchUI can maintain the selection of refiners.

Problem is that when we enable the hashing in solution and try to select any of the refiner, we are facing below issue

suppose i am search page - http://www.example.com/#/Search

when i select "US" in the refiner then
"http://www.example.com/?size=n_20_n&filters[0][field]=Region&filters[0][values][0]=US&filters[0][type]=any"

now if you notice in the above url "#search" got removed, which is creating the problem in application.

@JasonStoltz.. Please help me here

2

Hey Ranjeet, I unfortunately don't think trackUrlState is going to be compatible with hash routing.

3

@JasonStoltz- can you please help us in achieving this? any suggestion to achieve this?

4

That's a tough one.

First and foremost, I highly recommend trying to find a way to load the search page without using hash routing.

If that is not possible, then I'd recommend disabling trackUrlState.

If you still need trackUrlState to be enabled and you can't change your hash routing, then you're going to have to get creative.

https://github.com/elastic/search-ui/blob/master/packages/search-ui/src/URLManager.js manages the url state in Search UI. You could attempt to use your own that preserves hash state...

You'd need to do something like this in order to use it:

import { SearchDriver } from "@elastic/search-ui";

const config = {
  /* your config */
};
const driver = new SearchDriver(config);
driver.URLManager = YourCustomURLManager

...

<SearchProvider driver={driver}>
</SearchProvider>

That's the best I can do for you. Be cautious if you do that though, you're changing Search UI internals directly, which means updating Search UI versions could break your implementation. I've also never tried that before, so I have no idea how well it will work. It will also require looking at our source code, particularly the URLManager and SearchProvider.

Good luck!

Jason

1 Like
5

Thanks for the quick reply @JasonStoltz

6

@JasonStoltz, is there any plan to support hashing in the url in searchui?

7

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.