# routingOptions: how to merge custom functions with defaults?

**URL:** <https://discuss.elastic.co/t/routingoptions-how-to-merge-custom-functions-with-defaults/339578>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [July 28, 2023, 6:07pm UTC](https://discuss.elastic.co/t/routingoptions-how-to-merge-custom-functions-with-defaults/339578 "2023-07-28T18:07:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dorothea](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dorothea/32/124040_2.png) [@dorothea](https://discuss.elastic.co/u/dorothea)\
**Post date:** [July 28, 2023, 6:07pm UTC](https://discuss.elastic.co/t/routingoptions-how-to-merge-custom-functions-with-defaults/339578/1 "2023-07-28T18:07:30Z")

</div>

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](https://docs.elastic.co/search-ui/api/core/configuration#routing-options)

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:

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

const routingOptions = {
  ...defaultRoutingOptions,
  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" }]
    };
  }
};

```

---

<div class="post-metadata">

**Author:** ![joemcelroy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joemcelroy/32/103757_2.png) [@joemcelroy](https://discuss.elastic.co/u/joemcelroy)\
**Post date:** [July 28, 2023, 7:33pm UTC](https://discuss.elastic.co/t/routingoptions-how-to-merge-custom-functions-with-defaults/339578/2 "2023-07-28T19:33:02Z")

</div>

unfortunately the [functions](https://github.com/elastic/search-ui/blob/main/packages/search-ui/src/URLManager.ts#L66-L107) 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

joe

---

<div class="post-metadata">

**Author:** ![dorothea](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dorothea/32/124040_2.png) [@dorothea](https://discuss.elastic.co/u/dorothea)\
**Post date:** [July 28, 2023, 8:08pm UTC](https://discuss.elastic.co/t/routingoptions-how-to-merge-custom-functions-with-defaults/339578/3 "2023-07-28T20:08:50Z")

</div>

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`?

---

<div class="post-metadata">

**Author:** ![dorothea](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dorothea/32/124040_2.png) [@dorothea](https://discuss.elastic.co/u/dorothea)\
**Post date:** [July 29, 2023, 12:00pm UTC](https://discuss.elastic.co/t/routingoptions-how-to-merge-custom-functions-with-defaults/339578/4 "2023-07-29T12:00:30Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 26, 2023, 12:01pm UTC](https://discuss.elastic.co/t/routingoptions-how-to-merge-custom-functions-with-defaults/339578/5 "2023-08-26T12:01:26Z")

</div>

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