So behandeln Sie den URL-Parameter in React-Router, ohne die Seite zu aktualisieren

Dieses Mal zeige ich Ihnen, wie Sie mit URL-Parametern in React-Router umgehen. Die Seite wird nicht aktualisiert. Welche Vorsichtsmaßnahmen gibt es für den Umgang mit URL-Parametern in React-Router? Auffrischen. Das Folgende ist ein praktischer Fall.

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:

So packen Sie ein Vue-Projekt auf den Server

So verwenden Sie Webstorm zum Hinzufügen von *. vue-Dateien

Das obige ist der detaillierte Inhalt vonSo behandeln Sie den URL-Parameter in React-Router, ohne die Seite zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!