SSR'd React components depending on query not matching client

When use in conjunction with SSR, it seems that when rendered on the server, the location state object doesn’t container the query. So, a mapStateToProps like:

const mapStateToProps = ({location}) => {
  return {
    tabActive:
      get(location, ['query', 'find'], null) ===
      Constants.FIRST_OPTION,
  };
};

Gets the checksum react error for server markup not matching client markup, since on the server location.query is not present, yet on the client it is. Is there a proper way to access the query string from the server side rendering pass?

[Maushundb]

Yup, doing

  const path = req.path + (isEmpty(req.query) ? '' : '?' + queryString.stringify(req.query));
  const history = createHistory({ initialEntries: [path] })

Seems to have done the trick! Cheers.

[faceyspacey]

Exactly. You have to manually recreate /path?query=foo

Look at the history API. I forget but it might also take a location object instead of a string which will be easier for you to provide without string creation.

Also log history.location after you create the history. If it has the query on it, it will work. …crossing my fingers that the history memory package works the same as the browser one.