在按钮上启动POST请求后重定向

Question

我制作了一个注册表单，根据注册的成功/不成功，我希望在用户单击按钮并收到服务器的响应后，将用户重定向到带有通知的页面。如果注册成功，则路由为"register/success"，否则为"register/error"。

点击按钮时，我通过axios发送请求：

<Button
type="submit"
onClick={() => {
sendCreateAccountRequest(
fullName,
email,
password,
confirmingPassword
);
}}
>Create Account</Button>

调用的函数：

export const sendCreateAccountRequest = (fullName, email, password) => {
const obj = { fullName, email, password }
axios
.post(url.registerUrl, obj)
.then(response => {
if (response.status === 200 || response.status === 204) {
return true
}
})
.catch(err => {
if (err.response) {
return err.message
}
if (err.request) {
return "There are some server troubles"
}
})
}

我曾考虑使用useHistory钩子，但被调用的函数是纯JS的，没有反应。同样，我想让Redux参与其中，但并没有找到在组件之外使用它的方法。

在相应路线上提交表单后，如何重定向用户？为此，我应该使用什么方法？

Answer 1

您可以从sendCreateAccountRequest中删除catch块，并处理组件级别的错误：

const history = useHistory();
const handleClick = async () => {
try {
await sendCreateAccountRequest(
fullName,
email,
password,
confirmingPassword
);
history.push('register/success');
} catch (e) {
// handle error here
history.push('register/error');
}
}
(...)
<Button type="submit"onClick={handleClick}>Create Account</Button>

但是，如果您想将该逻辑委派到组件外部，您应该查看https://redux-toolkit.js.org/图书馆及其实例。