Перенаправлять только один раз после завершения асинхронной задачи в React Router dom

Я создал простое приложение с реакцией и редуксом для регистрации пользователей и проверки электронной почты.

У меня есть два компонента Register.js и VerifyEmail.js.

В Register.js я собираю пользовательский ввод и отправляю его на сервер, используя действия, определенные в избыточности. Если регистрация прошла успешно, для состояния redux signupSuccess устанавливается значение true. В Register.js я проверю, верно ли значение signupSuccess, я перенаправлю пользователя на компонент VerifyEmail.js, иначе я отобразлю ошибки.

Но проблема в том, что если пользователь нажимает кнопку «Назад» и хочет повторно ввести регистрационную информацию, поскольку состояние signupSuccess по-прежнему истинно, оно снова перенаправляет пользователя на VerifyEmail.js. Но я не хочу перенаправлять пользователя, когда он пришел, нажав кнопку «Назад» из VerifyEmail.js.

Я разместил только некоторые части кода, чтобы упростить описание.

Регистрация.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, я мог бы проверить, является ли предыдущий путь «/verify-email», и не перенаправлять в этом случае. Я сослался на этот пост о том, как прочитать предыдущий путь в стеке истории ? Но решение не будет применяться в моем случае, поскольку пользователь переходит к Register.js, нажимая кнопку «Назад» из VerufyEmail.js (это могло бы сработать, если бы я перенаправлял его с помощью history.push или что-то в этом роде) .
  2. Я могу настроить дополнительное состояние редукции redirectonlyOnce установить для него значение true в первый раз и ссылаться на него при следующих проверках. Но это не очень хорошее решение, так как эти состояния сохраняются после обновления страницы, и пользователь не будет перенаправлен на VerifyEmail.js, если он вернется к Register.js, обновит страницу, а затем отправит форму.

Любая помощь будет высоко оценена. Спасибо.


person Sanketh B. K    schedule 08.06.2021    source источник


Ответы (1)


попробуйте использовать hisotry.push в вашем действии sendUserSignupData().

person Asim Hafeez    schedule 08.06.2021
comment
спасибо вроде решит проблему - person Sanketh B. K; 08.06.2021