routingOptions: how to merge custom functions with defaults?

I see that it's possible to customize how search parameters get serialized by writing my own routingOptions object as shown here: Configuration | Elastic docs

Can I customize selected parts of this, perhaps just the stateToUrl and urlToState functions? Basically, is there a way to access the default routingOptions so I can merge/spread my custom functions with it?

Something like:

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

const routingOptions = {
  stateToUrl: (state) => {
    const statesFilter = state.filters.find(
      (filter) => filter.field === "states"
    const states = statesFilter ? statesFilter.values.join(",") : "all";
    return `/search/${states}?query=${state.searchTerm}`;
  urlToState: (url) => {
    const match = url.match(/\/search\/(\w+)\?query=(\w+)/);
    if (!match) return {};
    return {
      searchTerm: match[2],
      filters: [{ field: "states", values: [match[1].split(",")], type: "any" }]

unfortunately the functions are not exported currently.

Couple of choices for now:

  • Copy and paste and maintain these functions
  • Submit a PR which exports them so they can be imported from your code


Thanks Joe!

In that case, is there somewhere asPath and router are defined (from the example in the docs)?

Or are readUrl() and writeUrl() intended to a sort of getter/setter for window.location?

Ah, reading those functions, it seems that’s the case, so I don’t need to define asPath and router if I’m not using NextJS.

Thanks again for your help Joe!

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