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:

pathToRegexp berasal dari perpustakaan laluan-ke-regexp, digunakan untuk padanan laluan Ia digunakan di sini untuk menentukan sama ada halaman sebelumnya ialah halaman B.

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

Penyelesaian lain

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

Nilai sama ada halaman A dikembalikan oleh halaman B: tambah keadaan apabila halaman B kembali, history.push({ nama laluan: laluan, keadaan: {daripada } });, masukkan halaman A dan nilai sama ada untuk kembali dari halaman B mengikut keadaan. Tetapi apabila B mempunyai berbilang entri, anda perlu mengetahui sumber halaman apabila kembali, jika tidak, anda tidak boleh kembali, dan logiknya agak rumit dan terdedah kepada ralat.

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

Ringkasan

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: "

tutorial video bertindak balas

"

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!