For features like SSR and sharing the search via url, we need to save the search state (what has been selected) via the url. To do this, we add the
withSearchkitRouting HOC to the page. This needs to be after adding
withSearchkitRouting will watch for changes within the searchkit client and sync the state to the url. It will also listen for changes to the location state and update searchkit client based on the previous url.
This will enable you to be able to provide query params in the url for searchkit to update state, for example
/?query=heat will show results with the query for "heat".
To get started, import the
withSearchkitRouting HOC from
Out the box, searchkit provides default url serialisation functions. You may want to make the url more "pretty", depending on your application. To do so, you need to provide two functions to the HOC,
myCustomStateToRouteFn will get the searchState from searchkitClient and you need to return an object for querystring to serialise to. An example of one below
myCustomRouteToStateFn will get the routeState from the url (objectified via QS) and you need to return a searchState object. An example of one below
For SEO, you may also want to adjust the url path too, based on what state has been selected. You can do this by overriding the
parseURL functions. See demo site for example of this working and below is the code for this change.
You will need to use the
useSearchkitQueryValue hook to maintain the searchbar input value. The hook will listen to changes to the searchkit state and update.
For the first version, ive built it for NextJS but should be relatively easy to be used within express for example. If thats something you would like, open an issue.