React Router - Build State from Query String

Question

New to React, building a search app where the URL is built up based on search term entered and subsequent filters that are selected. I am updating the query string, not the path, based on search term and selections made. (e.g /?term=movies&selections=action,adventure) I am manually pushing these changes to the query string via browserHistory.push() in Action Creators. I'm not sure of the right pattern to follow to hydrate application state in response to these updates.

I can check query string params in componentWillMount(), on first render to render initial state, and that works fine, but when the browsers back/forward buttons are used I am not sure of the best pattern to follow to rebuild the state.

I am using the following modules on top of React: react-redux react-router react-router-redux

Advice appreciated thanks.

score 1 · Accepted Answer · answered Apr 24 '16 at 19:01

You need to check query in componentWillReceiveProps callback. Something like this:

componentWillReceiveProps(nextProps) {
  if (!_.isEqual(this.props.location.query, nextProps.location.query) {
     this.fetchDataFromServer(nextProps.location.query);
  }
}

React Router - Build State from Query String

1 Answers1