Welche Möglichkeiten gibt es, URL-Parameter in React-Router zu ändern, ohne die Seite zu aktualisieren?

Dieses Mal werde ich Ihnen zeigen, wie Sie die URL-Parameter in React-Router ändern können, ohne die Seite zu aktualisieren. Welche Vorsichtsmaßnahmen gibt es, um die URL-Parameter in React-Router zu ändern, ohne die Seite zu aktualisieren? . Hier ist der eigentliche Kampf. Schauen wir uns den Fall an.

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 Anwendungsfälle von JS-Rückruffunktionen

Detaillierte Erläuterung häufiger Hinzufügungen, Löschungen und Änderungen und Abfrageoperationen von JS-DOM-Elementen

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, URL-Parameter in React-Router zu ändern, ohne die Seite zu aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!