React router v4 SearchBox and Hit in different routes

I’m doing a test case with Angolia to see if it’s suitable to our project.

The first challenge I’m facing is to handle different routes for Search component and Result component.

My routes in v4 are following a similar approach to this example:

Where you can specify the view that your route should be rendered.

In my example I’m trying to render <SearchBox /> to my “breadcrumb” route view and the <Hit /> to my “main” route view.

But still wondering how to connect them. It seems that the only way is through redux but even so, how to handle the right results in the component ?

Thanks

Hi @serraventura,

In React InstantSearch you don’t need to explicitly connect the components between them. The only requirement is to nest the widgets inside the InstantSearch component. According to your example you only need to nest your Route components inside InstantSearch. In this manner even components render by the Route will be able to render a widget. According to the given example you end up with something like:

<Router>
  <InstantSearch
    appId="latency"
    apiKey="6be0576ff61c053d5f9a3225e2a90f76"
    indexName="ikea"
  >
    <div>
      <Link to="/">Home</Link>
      <Link to="/bubblegum">Bubblegum</Link>
      <Link to="/shoelaces">Shoelaces</Link>
      <SearchBox />
    </div>

    <Route path="/" exact render={() => <div>Home</div>} />
    <Route path="/bubblegum" render={() => <div>Bubblegum</div>} />
    <Route path="/shoelaces" render={() => <Hits />} />
  </InstantSearch>
</Router>

In this example, the SearchBox will be render on every page along with the links. But the Hits will only be render on the page /shoelaces. You can find an other example of React InstantSearch + React Router in our recipes page in the documentation (React Router v4).

Hope that helps, let me know if you have questions :wink:

Hi Samuel,
Thanks for replying.

That should really work. I just don’t like to have other parts of my App wrapped by
< InstantSearch />.

Not sure if I gonna use it yet.

Thanks anyway :slight_smile:

Hi @serraventura,

If you already used a lib that use the context (ex: Redux, Router, Intl) you already wrap your App with this kind of components. Why you don’t want to do the same with InstantSearch? Glad to here your feedbacks about that.

Thanks! :slightly_smiling_face:

Hi @samuel.vaillant,

The only reason is that InstantSearch is a very small portion of my app. The only component that wraps a big portion of my app is react router. I don’t wrap unrelated components with enrelated redux. I don’t have top containers in my app.

But it’s just a personal choice off course. Nothing against InstantSearch.

thanks again for the help

Ok well, thanks for the feedbacks @serraventura!

Let me know if you have other questions.