Force Remounting-Komponente, wenn Router-Parameter ändern sich ändern?

Question

Ich habe eine einfache App geschrieben, wo die Remote-Ressourcen innerhalb componentDidMount Funktionen der Komponenten abgerufen werden.

Ich benutze React Router und wenn die Route komplett geändert wird, wird die vorherige Komponente gut aufgehoben und dann die neue eingehängt.

Das Problem ist, wenn der Benutzer auf der gleichen Route bleibt, aber nur einige Parameter geändert werden. In diesem Fall wird die Komponente nur aktualisiert. Dies ist das Standardverhalten. Aber es ist manchmal schwierig, das Update in allen Kindern Komponenten zu behandeln, in denen bisher nur componentDidMount benötigt wurde ...

Gibt es eine Möglichkeit, die Remontage der Komponente zu erzwingen, wenn der Benutzer auf dem gleichen Weg aufhält, aber einige params verändern sich?

Danke.

Answer 1

Gehen Sie wie folgt vor:

.

<Route path='/movie/:movieId' component={Movie} /> 

Wenn Sie zu/Film/Kasse: MovieID

class Movie extends Component { 

loadAllData = (movieID) => { 
    //if you load data 
    this.props.getMovieInfo(movieID); 
    this.props.getMovie_YOUTUBE(movieID); 
    this.props.getMovie_SIMILAR(movieID); 
    } 
    componentDidMount() { 
    this.loadAllData(this.props.match.params.movieId); 
    } 
    componentWillReceiveProps(nextProps){ 
    if(nextProps.match.params.movieId !== this.props.match.params.movieId) { 
     console.log(nextProps); 
     this.loadAllData(nextProps.match.params.movieId); 
    } 
    } 

    render(){ 
    return(... stuff and <Link to={`/movie/${id}`} key={index}>...</Link>) 
    } 
}