Komponente wird nicht neu installiert, wenn sich die Routenparameter ändern

Question

Ich arbeite an einer React-Anwendung, die den React-Router verwendet. Ich habe eine Projekt-Seite, die eine URL hat, wie folgt:

myapplication.com/project/unique-project-id 

Wenn die Projektkomponente lädt, ich Auslöser für dieses Projekt eine Datenanforderung aus dem componentDidMount Ereignisse. Ich laufe jetzt in ein Problem, bei dem, wenn ich direkt zwischen zwei Projekten wechseln, so dass nur die ID Änderungen wie diese ...

myapplication.com/project/982378632 
myapplication.com/project/782387223 
myapplication.com/project/198731289 

componentDidMount nicht wieder ausgelöst, so dass die Daten nicht aktualisiert wird. Gibt es ein anderes Lebenszyklusereignis, das ich verwenden sollte, um meine Datenanforderung auszulösen, oder eine andere Strategie, um dieses Problem anzugehen?

Answer 1

Wenn der Link auf die gleiche Route mit nur einem anderen Parameter verweist, wird er nicht neu gemountet, sondern erhält stattdessen neue Requisiten. So können Sie die componentWillReceiveProps(newProps) Funktion verwenden und nach newProps.params.projectId suchen.

Wenn Sie versuchen, Daten zu laden, würde ich empfehlen, die Daten abzurufen, bevor der Router die Übereinstimmung mit statischen Methoden für die Komponente verarbeitet. Schau dir dieses Beispiel an. React Router Mega Demo. Auf diese Weise würde die Komponente die Daten laden und automatisch aktualisieren, wenn sich die Routenparameter ändern, ohne auf componentWillReceiveProps angewiesen zu sein.

Answer 2

Wenn Sie eine Komponenten-Remount-Funktion benötigen, wenn sich die Route ändert, können Sie einen eindeutigen Schlüssel an das Schlüsselattribut Ihrer Komponente übergeben (der Schlüssel ist Ihrem Pfad/Route zugeordnet). Jedes Mal, wenn sich die Route ändert, ändert sich auch der Schlüssel, welcher die React-Komponente zum Unmount/Remount auslöst. Ich habe die Idee von this answer

Answer 3

react-router ist kaputt, weil es Komponenten bei jeder Standortänderung neu mounten müssen.

ich es geschafft, obwohl eine Lösung für diesen Fehler zu finden:

https://github.com/ReactTraining/react-router/issues/1982#issuecomment-275346314

Kurz (den Link oben für weitere Informationen siehe)

<Router createElement={ (component, props) => 
{ 
    const { location } = props 
    const key = `${location.pathname}${location.search}` 
    props = { ...props, key } 
    return React.createElement(component, props) 
} }/> 

Dies wird es auf jede URL machen Remount Änderung

Answer 4

Sie müssen sich darüber im Klaren sein, dass eine Änderung der Route keine Seitenaktualisierung verursacht, Sie müssen selbst damit umgehen.

import theThingsYouNeed from './whereYouFindThem' 

export default class Project extends React.Component { 

    componentWillMount() { 

     this.state = { 
      id: this.props.router.params.id 
     } 

     // fire action to update redux project store 
     this.props.dispatch(fetchProject(this.props.router.params.id)) 
    } 

    componentDidUpdate(prevProps, prevState) { 
     /** 
     * this is the initial render 
     * without a previous prop change 
     */ 
     if(prevProps == undefined) { 
      return false 
     } 

     /** 
     * new Project in town ? 
     */ 
     if (this.state.id != this.props.router.params.id) { 
      this.props.dispatch(fetchProject(this.props.router.params.id)) 
      this.setState({id: this.props.router.params.id}) 
     } 

    } 

    render() { <Project .../> } 
}