How to re-render component if path change?

Question

if I'm on a movie page

/movie/some-movie

and go on link to

/movie/another-movie

component not render

react-route v4

router

<Route exact path="/movie/:urlRusLat" component={Movie} />

link

<Link to={'/' + item.media_type + '/' + urlRusLat(item.title || item.name) + '-' + item.id} className="result-element" key={index}>

I try use componentWillReceiveProps and send request, but i receive in props new location, like in nextProps.

componentWillReceiveProps(nextProps) {
  console.log(this.props)
  if (this.props.location.pathname !== nextProps.location.pathname) {
    this.sendRequest();
  }

}

componentDidMount() {
  this.sendRequest();
}

componentWillUnmount() {
  this.props.clearMovieData();
}

sendRequest = () => {
  let movieId = this.props.location.pathname.split('-');
  this.props.loadMovieData(movieId[1]);
}

How can i make send request if path change, or render component again?

Please provide the code. It's tough without actually code to look at. — Max Millington

Basavaraj Sonnad Basavaraj Sonnad · Accepted Answer · 2017-10-24T03:59:21

You can use componentDidUpdate() to call the sendRequest() function. Now you get the updated props. But make sure you add a check that oldProps.location != props.location before making a sendRequest() call.

How to re-render component if path change?

1 Answers