About React + Algolia + React router V4

Hi,

I need your help because I can not properly use Algolia with React Router and server side rendering…

I’m a beginner, I do not know if it’s the right way to go.

My files…

component/Job.js

I export the function findResultsState from Job Component

const { InstantSearch, findResultsState } = createInstantSearch();
import {
  RefinementList,
  SearchBox,
  Hits,
  Configure,
} from 'react-instantsearch/dom';

import { createInstantSearch } from 'react-instantsearch/server';

class Job extends Component {

  render() {
    const { resultsState } = this.props;
    return [
      <Layout
        key={id}
        left={
          <section className={Styles.jobsSection}>
            <h1>title </h1>
            <div className={Styles.content}>
            <InstantSearch
        appId="xx"
        apiKey="xx"
        indexName="xx"
        resultsState={resultsState}
      >
        <SearchBox />
        <Hits />
        <RefinementList attribute="category" />
      </InstantSearch>
            </div>
          </section>
        }
      />
    ];
  }
}


export default {
  findResultsState,
  component :Job
}

Here my Router.js

export default [
    {
        component : App,
        routes: [
            {   ...Jobs,
                path:'/jobs',
                exact:true,
            },
        ]
    }
]

server.js

Here I get the function findResultsState and I pass it as argument the component Job…:thinking:

  const promises = matchRoutes(Routes, req.path).map(async ({route, match}) => {
    return route.findResultsState ? await route.findResultsState(route.component) : Promise.resolve()
  })

And then … inside my server.js

return Promise
    .all(promises)
    .then((data) => {
      const content = renderToString(
        <Provider store={store}>
          <StaticRouter location={req.path} context={context}>
            <div> {renderRoutes(Routes)}</div>
          </StaticRouter>
        </Provider>
      );
      const html = `<html>
    <head>
    </head>
    <body>
      <script> window.INITIAL_STATE = ${JSON
        .stringify(data)
        .replace(/</g, '\\u003c')}</script>
     <script src="/bundle.js"></script>
    </body>
    </html>`;
res.send(html)
        })
    });

Problem :

I have no idea how to pass the data to my Job component using {renderRoutes(Routes)}

thx u for your help !