score:9

Accepted answer

Make this.state such that it will control how your component gets rendered.

Now, within componentWillReceiveProps, check the nextProps argument 

componentWillReceiveProps(nextProps, nextState) {
  if( <check in nextProps if my route has changed> ) {
    let newState = Object.assign({}, this.state);
    // make necessary changes to the nextState Object by calling
    // functions which would change the rendering of the current page
    this.setState({ nextState });
  }
}

This would make componentWillReceiveProps take action only when the route changes.

Now in your render function,

render() {
  const { necessary, variables, to, render } = this.state;
  let renderVariables = this.utilityFunctionsReqToRender(someArgs);
  return (
    <toRenderJsx>
      ...
    </toRenderJsx>
  )
}

This would make your component "refresh" whenever the route changes.

score:1

componentWillReceiveProps is deprecated since React 16.3.0 (as says a warning in the browser console)

Reference : https://reactjs.org/docs/react-component.html#componentdidupdate

So componentDidUpdate can be used to get the new state and reload data depending on params

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate " +prevState.id);
    reloadData(prevState.id);
}

Related Query

More Query from same tag