React Router where to use AJAX

Question

I am working on a project using React Router, and I'm having some problems with the data flow.

On every page there is an AJAX call that gets the data for the component. I have been putting them in componentDidMount:

// Below code is written in ES6
componentDidMount(){
  $.get(someURL, (data)=>{
    this.setState({data:data})
  })
}

Although this works on initial load, it does not get called again when the url changes (a manual refresh is needed). I cannot seem to find a proper life cycle to place the AJAX calls.

Someone please enlighten me with the proper approach to getting data in React Router.

Answer 1

After a bit of searching around, this README ultimately solves the problem.

There are 2 solutions outlined in the document:

1. Use addHandlerKey={true}:

   <Route handler={User} path="/user/:userId" addHandlerKey={true} />

2. Use componentWillReceiveProps instead of componentDidMount.

   • I ended up using both, componentDidMount for the initial load, componentWillReceiveProps for subsequent ones.
   • Since they share the same code, I created a new function _updateState and called it in both lifecycles.

---

My code now:

class Classes extends React.Component {
  componentDidMount(){ this._updateState() }
  componentWillReceiveProps(){ this._updateState() }
  _updateState(){
    $.get(/*Some URL*/, (data)=>{
      this.setState({data:data})
    })
  }
}