Routing for multiple indexes when using <Index />

Open Q&A
1

Hello!

I am using the react-instantsearch-hooks lib and trying to get routing working multiple indexes using the <Index /> component. I have it working where the url writes to the state, but not the state to the url.

I forked the Algolia routing example and made 2 changes: infallible-burnell-jcuktn - CodeSandbox

  1. Wrapped the Hits in an Index:
<Index indexName="instant_search">
    <Hits hitComponent={Hit} />
</Index>
  1. returned the parseURL in search-routing.js to return it in a keyed object for the index:
return {
   instant_search: {
      query: decodeURIComponent(query),
      page,
      brands: allBrands.map(decodeURIComponent),
      category
   }
};

Instead of:

return {
    query: decodeURIComponent(query),
    page,
    brands: allBrands.map(decodeURIComponent),
    category
};

This makes the query appear in the search input when the page loads, e.g routing-basic

But typing in the input does not update the query in the url.

Is this possible with multiple indexes? Thank you!

2

For other that run into this problem:

The solution is to add the indexId parameter to the index widget. Providing an indexId allows different <Index> widgets to target the same Algolia index. It’s especially useful for the routing feature, and lets you find the refinements that match an <Index> widget. More information on this can be found in our multi-index search guide and you can see a working example in this CodeSandBox.