So merken Sie sich den Seitenstatus, bevor Sie auf einen Sprung reagieren

React implementiert die Methode zum Speichern des Seitenstatus vor dem Springen: 1. Überwachen Sie Pfadänderungen und aktualisieren Sie lastPath und currentPath im Redux-Speicher. 2. Speichern Sie den Seitenstatus im Redux-Speicher, wenn Sie Seite A verlassen. 3. Wenn der letzte Pfad im Redux-Speicher dem Pfad von Seite B entspricht, wird davon ausgegangen, dass A von B in den wiederhergestellten Zustand zurückversetzt wird, andernfalls wird er nicht wiederhergestellt.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie kann ich mir den Seitenstatus merken, bevor ich in React springe?

React-Seite kehrt zurück, um den letzten Status beizubehalten.

Anforderungen. Seite A springt zu Seite B und kehrt dann zu Seite A zurück. Seite A muss den Status wiederherstellen, bevor sie verlassen wird.

• Seite A und Seite B haben mehrere Eingänge. Wenn Sie von anderen Seiten zu Seite A springen, wird der Status von Seite A nicht wiederhergestellt.

• Design

Überwachen Sie Pfadänderungen und aktualisieren Sie lastPath und currentPath im Redux-Store.

• Speichern Sie beim Verlassen von Seite A den Seitenstatus im Redux-Store Wenn beim Aufrufen von Seite A der letzte Pfad im Redux-Speicher mit dem Pfad von Seite B übereinstimmt, wird davon ausgegangen, dass A von B in den wiederhergestellten Zustand zurückversetzt wird, andernfalls wird es nicht wiederhergestellt.

• Implementierung

• Das Projekt verwendet die React-Router + DVA-Bibliothek, und der Implementierungsteil umfasst verwandte Technologien.
  Überwachen Sie Pfadänderungen, überwachen Sie Pfadänderungen im Verlauf und zeichnen Sie lastPath und currentPath auf. Hier werden DVA-Abonnements verwendet, um den Verlauf zu abonnieren, und wenn sich der Pfad ändert, werden die Pfadinformationen mit dem Status synchronisiert.

const model = {
  namespace: "global",
  state: {
    pathName: { last: "", current: "" },
  },
  reducers: {
    setPathName(state: any, { pathName }: any) {
      state.pathName.last = state.pathName.current;
      state.pathName.current = pathName;
    },
   
  effects: {
  },
  subscriptions: {
    setup({ history, dispatch }: any) {
      return history.listen(({ pathName }: any) => {
        dispatch({ type: "global/setPathName", pathName });
      });
    }
  }
};

Synchronisieren Sie den Status mit dem Redux-Store, wenn die Seite entladen wird, wie zum Beispiel:

componentWillUnmount() {
    const { dispatch } = this.props;
    const { activeKey } = this.state;
    dispatch({
      type: "projectInfo/setProjectInfoPage",
      payload: { activeKey }
    });
  }

Wenn die Seite neu geladen wird, wie zum Beispiel:

state = {
    activeKey: pathToRegexp(PagePath.B).exec(pathName.last) ? activeKey : ""
  };

pathToRegexp kommt aus der Path-to-Regexp-Bibliothek und wird für den Routenabgleich verwendet Es wird hier verwendet, um zu bestimmen, ob die vorherige Seite für Seite B.

Andere Lösungen

Beurteilen Sie, ob Seite A von Seite B zurückgegeben wird: Fügen Sie den Status hinzu, wenn Seite B zurückkehrt, History.push({ pathname: path, state: {from} });, geben Sie Seite A ein und beurteilen Sie, ob dies der Fall ist basiert auf dem Status Return von Seite B. Wenn B jedoch mehrere Einträge hat, müssen Sie bei der Rückkehr die Quelle der Seite kennen, sonst können Sie nicht zurückkehren und die Logik ist etwas kompliziert und fehleranfällig.

Zusammenfassung

Dieser Artikel schlägt eine Lösung für die Seitenrückführung vor, um den letzten Zustand beizubehalten, was für Situationen geeignet ist, in denen die Seite mehrere Ein- und Ausgänge hat. Diese Lösung verwendet die Methode der Überwachung von Verlaufsänderungen und der Aufzeichnung der letzten Seitenadresse und bietet so eine Grundlage für die Entscheidung, ob der Status wiederhergestellt werden soll.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonSo merken Sie sich den Seitenstatus, bevor Sie auf einen Sprung reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!