Redirect hanya sekali setelah tugas asinkron selesai di dom router reaksi

Saya telah membangun aplikasi sederhana dengan reaksi dan redux untuk pendaftaran pengguna dan verifikasi email.

Saya memiliki dua komponen Register.js dan VerifyEmail.js.

Di Register.js, saya mengumpulkan input pengguna dan mengirimkannya ke server menggunakan tindakan yang ditentukan dalam redux. Jika pendaftaran berhasil, status redux signupSuccess disetel ke true. Di Register.js saya akan memeriksa apakah signupSuccess benar. Saya akan mengarahkan pengguna ke komponen VerifyEmail.js jika tidak, saya akan menampilkan kesalahan.

Namun masalahnya adalah jika pengguna mengklik tombol kembali dan ingin memasukkan kembali informasi pendaftaran, karena status signupSuccess masih benar, maka pengguna akan dialihkan lagi ke VerifyEmail.js. Tetapi saya tidak ingin mengalihkan pengguna ketika dia datang dengan menekan tombol kembali dari VerifyEmail.js.

Saya hanya memposting beberapa bagian kode untuk menyederhanakan deskripsi.

Daftar.js

function Register(props) {
    let history = useHistory();
    
    // props from redux store 
    const { loading, signupErrors, signupSuccess, sendUserSignupData } = props;

   const [formData, SetFormData] = useState({
     email: '',
     username: '',
     password: '',
     password2: '',
   })

  // signupSuccess is a redux store state is true (which is set to true after a asynchronous task of sending user data to server side and validation )

  if (signupSuccess) {
    history.push('/verify-email');
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    sendUserSignupData(formData);   // redux async function - this function sets signupSuccess to true
  };

  return (
    // sign up form
  )
}

Beberapa kemungkinan solusi yang dapat saya pikirkan adalah

  1. Jika ada cara untuk membaca jalur sebelumnya dari tumpukan riwayat di Register.js saya dapat memeriksa apakah jalur sebelumnya adalah '/verify-email' dan tidak mengarahkan ulang dalam kasus ini. Saya merujuk posting ini tentang cara membaca jalur sebelumnya di tumpukan riwayat Deteksi jalur sebelumnya di router reaksi ? Tetapi solusinya tidak berlaku dalam kasus saya karena pengguna membuka Register.js dengan menekan tombol kembali dari VerufyEmail.js (ini bisa berhasil jika saya mengarahkannya dengan menggunakan history.push atau semacamnya) .
  2. Saya dapat mengatur status redux tambahan redirectonlyOnce menyetelnya ke true untuk pertama kalinya dan merujuknya ke if berikutnya. Namun ini bukan solusi yang baik karena status tersebut tetap ada setelah halaman disegarkan dan pengguna tidak akan dialihkan ke VerifyEmail.js jika dia kembali ke Register.js untuk menyegarkan halaman dan kemudian mengirimkan formulir.

Bantuan apa pun akan sangat dihargai. Terima kasih.


person Sanketh B. K    schedule 08.06.2021    source sumber


Jawaban (1)


coba gunakan hisotry.push dalam tindakan sendUserSignupData() Anda.

person Asim Hafeez    schedule 08.06.2021
comment
Terima kasih sepertinya itu akan menyelesaikan masalah - person Sanketh B. K; 08.06.2021