Bagaimana untuk mengingati status halaman sebelum bertindak balas melompat

React melaksanakan kaedah mengingat status halaman sebelum melompat: 1. Pantau perubahan laluan, dan kemas kini lastPath dan currentPath ke stor redux apabila laluan berubah 2. Apabila meninggalkan halaman A, simpan status halaman ke Dalam stor redux; 3. Jika lastPath dalam stor redux adalah sama dengan laluan halaman B, ia dianggap bahawa A dikembalikan kepada keadaan yang dipulihkan oleh B, jika tidak, ia tidak akan dipulihkan.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk mengingati status halaman sebelum tindak balas melompat?

Halaman reaksi dikembalikan untuk mengekalkan keadaan terakhir

Keperluan

• Halaman A lompat Pergi ke halaman B dan kemudian kembali ke halaman A. Halaman A perlu memulihkan keadaan sebelum meninggalkan halaman; . Halaman A tidak memulihkan keadaan.

• Reka bentuk

Dengar perubahan laluan dan kemas kini lastPath dan currentPath ke stor redux apabila laluan berubah

• Apabila meninggalkan halaman A, simpan status halaman ke stor redux; sama dengan laluan halaman B, adalah dianggap bahawa A dikembalikan kepada keadaan dipulihkan oleh B, jika tidak, ia tidak akan dipulihkan.

• Pelaksanaan

• Projek menggunakan pustaka react-router + dva, dan bahagian pelaksanaan akan melibatkan teknologi berkaitan.

Pantau perubahan laluan, pantau perubahan laluan melalui sejarah dan rekod lastPath dan currentPath. Di sini, langganan dva digunakan untuk melanggan sejarah, dan apabila laluan berubah, maklumat laluan disegerakkan kepada keadaan.

Segerakkan status ke kedai redux apabila halaman dipunggah, contohnya:

Apabila halaman dimuat semula, contohnya:

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 });
      });
    }
  }
};

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

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

Artikel ini mencadangkan penyelesaian untuk pengembalian halaman untuk mengekalkan keadaan terakhir, yang sesuai untuk situasi di mana halaman mempunyai berbilang pintu masuk dan keluar. Penyelesaian ini menggunakan kaedah memantau perubahan sejarah dan merekodkan alamat halaman terakhir, sekali gus menyediakan asas untuk sama ada memulihkan keadaan.

Pembelajaran yang disyorkan: "

"

Atas ialah kandungan terperinci Bagaimana untuk mengingati status halaman sebelum bertindak balas melompat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!