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