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.

kulesa · Accepted Answer · 2016-04-24 19:01:48Z

1

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);
  }
}

answered Apr 24, 2016 at 19:01

kulesa

2,96422 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Router - Build State from Query String

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related