Installing with React-Router 4

I have a react app with react-router 4 but have a few errors when loading it. i used the example from github: algolia/react-instantsearch/blob/master/packages/react-instantsearch/examples/react-router/src/App.js

bit the error i am getting is: ailed prop type: The proplocationis marked as required inAlgolia, but its value isundefinedandCannot read property ‘search’ of undefined`

the algolia component is:

import React, { Component, PropTypes } from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import {
  InstantSearch,
  Hits, Menu, Pagination, SearchBox,
} from 'react-instantsearch/dom';
import qs from 'qs';
import { Grid, Row, Col } from 'react-bootstrap';

const updateAfter = 700;

const createURL = state => `?${qs.stringify(state)}`;

const searchStateToUrl =
  (props, searchState) =>
    searchState ? `${props.location.pathname}${createURL(searchState)}` : '';

class Algolia extends Component {
  constructor(props) {
    super(props);
    this.state = {searchState: qs.parse(props.location.search.slice(1))};
  }

  onSearchStateChange = searchState => {
    clearTimeout(this.debouncedSetState);
    this.debouncedSetState = setTimeout(() => {
      this.props.history.push(
      searchStateToUrl(this.props, searchState),
      searchState
      );
    }, updateAfter);
    this.setState({searchState});
  };

  render() {
    return (
      <InstantSearch
        appId="latency"
        apiKey="6be0576ff61c053d5f9a3225e2a90f76"
        indexName="ikea"
        searchState={this.state.searchState}
        onSearchStateChange={this.onSearchStateChange.bind(this)}
        createURL={createURL}
      >
        <div>
          <Grid>
            <Row>
              <Col md={12}>
                <h2>Store Page</h2>
              </Col>
            </Row>

            <Row>
              <Col md={3}>
                <SearchBox />
                <h5>Product Types</h5>
                <Menu attributeName="type" />
                <h5>Genre</h5>
                <Menu attributeName="tags_genre" />
                <h5>Tags</h5>
                <Menu attributeName="tags_general" />
                <h5>system</h5>
                <Menu attributeName="operating_systems" />
              </Col>
              <Col md={9}>
                <Hits />

                <div style={{alignSelf: 'center'}}>
                  <Pagination showLast={true} />
                </div>
              </Col>
            </Row>
          </Grid>
        </div>
      </InstantSearch>
    );
  }
}

Algolia.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,
  }),
  location: PropTypes.object.isRequired,
};

export default Algolia;

Hey,

Could you show me how you try to use the Algolia component you made, because I think you might have forgotten to give the location prop to <Algolia>

There’s also an example with v4, so you can check out that instead of the v3 example.

Does that help a bit?

previously when using i never passed anything in from another locations.

my index.js file is:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';

import Reducers from './reducers';
import App from './App';

import createHistory from 'history/createBrowserHistory';
import { ConnectedRouter } from 'react-router-redux';

const history = createHistory()

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const createStoreWithMiddleware = createStore(Reducers, {}, composeEnhancers(applyMiddleware(
  promiseMiddleware()
)));

ReactDOM.render(
  <Provider store={createStoreWithMiddleware}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

the simplified app.js file returns a path like this

on that algoliapage it calls a component of algolia:

import React, { Component} from 'react';
import Algolia from '../components/algolia/algolia';

export default class SearchPage extends Component {
  render() {
    return (
      <div>
        Search page
        <Algolia />
      </div>
    );
  }
}

the algolia component is shown above in the opening post