Ändern von Parametern in der URL ohne Aktualisierung in React-Router

Dieses Mal werde ich Ihnen die Parameter zum Ändern der URL in React-Router ohne Aktualisierung vorstellen. Was sind die Vorsichtsmaßnahmen zum Ändern der Parameter der URL in React-Router ohne Aktualisierung? Werfen wir einen Blick darauf.

Problem

Ich habe heute beim Schreiben der Seite ein Problem festgestellt, nämlich bei der Verwendung der URL-Parameterübergabefunktion in React Router, so wie hier :

export class MainRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={&#39;/channel/:channelId&#39;} component={ChannelPerPage}/>
          ...
        </Switch>
      </BrowserRouter>
    );
  }
}

Laut der offiziellen Dokumentation können Sie

this.props.match.params

in der ChannelPerPage-Komponente verwenden, um den Wert des URL-Parameters abzurufen, aber ich habe festgestellt, dass dies der Fall ist, wenn Sie nur die Parameter in der URL ändern unter dieser URL Bei einigen Änderungen, beispielsweise wenn sich die Kanal-ID von 1 auf 2 ändert, wird die Seite nicht aktualisiert.

Lösung

Nachdem ich die Informationen konsultiert hatte, stellte ich fest, dass die Hauptursache darin liegt, dass der Wechsel der Requisiten nicht dazu führt, dass die Komponente erneuert wird -gerendert, nur der Status Nur Änderungen führen dazu, dass die Komponente erneut gerendert wird, und die URL-Parameter gehören zu Requisiten, sodass eine Änderung der URL-Parameter nicht dazu führt, dass die Komponente erneut gerendert wird.

Später habe ich entdeckt, dass es in der React-Komponente eine überschreibbare Methode gibt

componentWillReceiveProps(nextProps) {
 ...
}

Diese Methode kann in der React-Komponente überschrieben werden, sodass Sie sie verwenden können Rufen Sie mit dieser Methode nextProps ab und ändern Sie den Statusinhalt in dieser Methode, sodass die Komponente erneut gerendert werden kann.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung des Echtzeitabrufs und der Aktualisierung des Eingabefelds in vue2.0

JS zur Implementierung einer einfachen Warenkorbfunktion, Codeanalyse

Das obige ist der detaillierte Inhalt vonÄndern von Parametern in der URL ohne Aktualisierung in React-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!