What is the need to provide `createURL` to `InstantSearch`?

I’m reading this guide on routing. It gives the following example:

    <div className="container">
      <InstantSearch
        searchClient={searchClient}
        indexName="instant_search"
        searchState={searchState}
        onSearchStateChange={onSearchStateChange}
        createURL={createURL}
      >

It’s clear to me how createUrl function is used inside searchStateToUrl() and urlToSearchState() functions, but what’s the need to provide it to InstantSearch?

Besides, I noticed that there’s createURL parameter that is passed down to RefinementList widget, I’m wondering why:

const RefinementList =
    ({
         items,
         isFromSearch,
         refine,
         searchForItems,
         createURL,
     }) => {}

If the element you are rendering is an anchor, it needs to have an href to be valid and be underlined. Even though we do .preventDefault on the click event there.

To be consistent, we provide createURL to every component

thanks for the answer, could you please elaborate a bit more? are referring to the first case with InstantSearch or with RefinementList? Because I provide the createUrl function to InstantSearch, where with RefinementList is supplied to the component.

The value you provide is a global function which is used for eg. default rendering of the pagination, menu, breadcrumbs etc. , while the function createURL given to custom widgets is the same function as you passed, but specifically for the relevant widget

1 Like