เปลี่ยนเส้นทางเพียงครั้งเดียวหลังจากงานอะซิงโครนัสสิ้นสุดลงใน React Router Dom

ฉันได้สร้างแอปพลิเคชันที่เรียบง่ายพร้อม react และ redux สำหรับการลงทะเบียนผู้ใช้และการยืนยันอีเมล

ฉันมีสององค์ประกอบ Register.js และ VerifyEmail.js

ใน Register.js ฉันรวบรวมอินพุตของผู้ใช้และส่งไปยังเซิร์ฟเวอร์โดยใช้การดำเนินการที่กำหนดไว้ใน redux หากการลงชื่อสมัครใช้สำเร็จ การลงชื่อสมัครใช้สถานะ redux จะถูกตั้งค่าเป็นจริง ใน Register.js ฉันจะตรวจสอบว่า signupSuccess เป็นจริงหรือไม่ ฉันจะเปลี่ยนเส้นทางผู้ใช้ไปยังส่วนประกอบ VerifyEmail.js ไม่เช่นนั้นฉันจะแสดงข้อผิดพลาด

แต่ปัญหาคือหากผู้ใช้คลิกปุ่มย้อนกลับและต้องการป้อนข้อมูลการลงทะเบียนอีกครั้ง เนื่องจากสถานะ signupSuccess ยังคงเป็นจริง ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปที่ VerifyEmail.js อีกครั้ง แต่ฉันไม่ต้องการเปลี่ยนเส้นทางผู้ใช้เมื่อเขามาโดยกดปุ่มย้อนกลับจาก VerifyEmail.js

ฉันได้โพสต์โค้ดเพียงบางส่วนเพื่อทำให้คำอธิบายง่ายขึ้น

Register.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
  )
}

วิธีแก้ปัญหาที่เป็นไปได้บางอย่างที่ฉันคิดได้ก็คือ

1. หากมีวิธีใดในการอ่านเส้นทางก่อนหน้าจากกองประวัติใน Register.js ฉันสามารถตรวจสอบว่าเส้นทางก่อนหน้าคือ '/ ยืนยันอีเมล' หรือไม่และไม่เปลี่ยนเส้นทางในกรณีนี้ ฉันอ้างอิงโพสต์นี้เกี่ยวกับวิธีอ่านเส้นทางก่อนหน้าในกองประวัติ ตรวจหาเส้นทางก่อนหน้าในเราเตอร์ตอบสนอง ? แต่วิธีแก้ปัญหานี้ใช้ไม่ได้ในกรณีของฉัน เนื่องจากผู้ใช้กำลังจะไปที่ Register.js โดยการกดปุ่มย้อนกลับจาก VerufyEmail.js (มันอาจจะได้ผลถ้าฉันเปลี่ยนเส้นทางเขาโดยใช้ history.push หรืออะไรสักอย่าง) .
2. ฉันสามารถตั้งค่าการเปลี่ยนเส้นทางสถานะ redux เพิ่มเติมได้เมื่อตั้งค่าเป็นจริงเป็นครั้งแรกและอ้างอิงในครั้งถัดไปหากตรวจสอบ แต่ไม่ใช่วิธีแก้ปัญหาที่ดี เนื่องจากสถานะเหล่านั้นยังคงอยู่หลังจากการรีเฟรชเพจ และผู้ใช้จะไม่ถูกเปลี่ยนเส้นทางไปที่ VerifyEmail.js หากเขากลับไปที่ Register.js รีเฟรชเพจแล้วส่งแบบฟอร์ม

ความช่วยเหลือใด ๆ จะได้รับการชื่นชมอย่างมาก ขอบคุณ