Die Lösung für die Seite, die nach Routenänderungen nach Reaktionssprüngen nicht aktualisiert wird

Frage

Es scheint viele Gründe für dieses Problem zu geben. Mein Problem ist, dass die URL mit Parametern nicht aktualisiert werden kann. In der Router-Version 5.0 ist die Verwendung der mit Router verknüpften Komponente zum Springen zur Seite wie folgt

Routing-Code

Lösung

Durch das Hinzufügen eines Schlüssels zum obersten Element der Routing-Komponente wird die Erkennung der Route verbessert, da normale Sprünge anhand des Pfads identifiziert werden. Wenn der Pfad jedoch Parameter enthält, kann die Route nicht genau identifiziert werden. Beim Anspringen einer Seite wird jedoch für jede Adresse ein Schlüssel zum Lokalisierungsobjekt hinzugefügt. Drucken Sie wie folgt

 // Komponente montieren componentDidMount() {
    Konsole.log(diese.Eigenschaften.Standort);
  }

Wir können die Route genau lokalisieren, indem wir diesen Schlüssel an das oberste Element der Route binden.

 rendern() {
    zurückkehren (
      {/*Das ist der Schlüssel*/}
      <div Schlüssel={this.props.location.key}>
          <Schalter>
            <Route exakter Pfad="/" component={Home} />
            <Route exakter Pfad="/products/:id" component={Products} />
            <Route exakter Pfad="/about" component={About} />
            <Route exakter Pfad="/Lösung" Komponente={Lösung} />
            <Route
              genau
              Pfad="/Lösungsdetails/:id"
              Komponente={SolutionDetails}
            />
            <Route exakter Pfad="/download" component={Download} />
            <Routenpfad="/about" Komponente={Download} />
            <Routengenauer Pfad="/details/:id" component={Details} />
            <Routenpfad="/Kontakt" Komponente={Kontakt} />
            <Routenkomponente={ErrorPage} />
          </Schalter>
      </div>
    );
  }

Möglicherweise stellen Sie jedoch fest, dass this.props ein leeres Objekt {} ist. Das kann daran liegen, dass Sie withRouter nicht zum Zuordnen der Komponente verwendet haben. Ordnen Sie sie einfach zu. Beachten Sie, dass app.js nicht verknüpft werden kann. withrouter kann nur mit Routing-Komponenten oder Unterkomponenten von app.js verknüpft werden.

importiere React, {Komponente} von „react“;
importiere { mit Router } von „react-router“;

Klasse Router erweitert Komponente {
 /**
  * Lebenszyklusfunktion */
 // Komponente montieren componentDidMount() {
   Konsole.log(diese.Eigenschaften.Standort);
 }
 rendern() {
   zurückkehren (
     <div Schlüssel={this.props.location.key}>
     </div>
   );
 }
}
exportiere Standard mit Router(Router);

Dies ist das Ende dieses Artikels über die Lösung des Problems, dass die Seite nach Routenänderungen nach React Jumps nicht aktualisiert wird. Weitere verwandte Inhalte zum Thema „Seite wird nach React Jumps nicht aktualisiert“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM in Zukunft unterstützen!