Calling a function in a component when a query parameter changes

Right now I’m working on moving some of our component state into query parameters so that pages are bookmarkable and other components can cleanly change the values.

It looks like react-router will call .render when a query parameter changes, but it’s not clear how to tell which part of the URL / which query parameter changed, and the work I’m doing is outside of .render, in an onChange or componentDidUpdate lifecycle method.

Is there a clean way of implementing this? It seems like I either need to:

• Duplicate the query parameters in the component’s state so I know when they change
• Or pass the query parameters down my view hierarchy from the router as a prop

[abergs]

@ryanflorence I believe you meant:

 componentWillReceiveProps (nextProps) {
    var old = this.props.query;
    var new = nextProps.query;
  }

[ryanflorence]

If I need that info I pass the params/query down my route view hierarchy and let react’s lifecycle hooks help me out.

Router.run(routes, (Handler, state) => {
  React.render(<Handler {...state}/>, document.body);
});

// and then everywhere else:
<RouteHandler {...this.props}/>

Now its available here on every component:

  componentWillReceiveProps (nextProps) {
    var oldQuery = this.props.query;
    var newQuery = nextProps.query;
  }

edit thanks @abergs