Redux是一个用于管理JavaScript应用程序状态的可预测的状态容器。它是一个独立于任何特定UI库的状态管理工具,适用于各种类型的应用程序,包括前端开发。
在Redux中,表单在onSubmit成功后无法直接重定向,是因为Redux本身是一个状态管理工具,它通过一个单一的状态树来管理应用的状态,并且所有的状态改变都是通过派发(action dispatch)来触发的。当表单提交成功后,Redux的状态并不知道要进行重定向操作。
为了解决这个问题,有以下两种常见的方法:
history
对象进行页面重定向。示例代码:
import { useHistory } from 'react-router-dom';
const MyForm = () => {
const history = useHistory();
const onSubmit = () => {
// 提交表单逻辑
// ...
// 表单提交成功后重定向到指定页面
history.push('/success-page');
}
return (
<form onSubmit={onSubmit}>
{/* 表单内容 */}
</form>
);
}
window.location
进行重定向:在表单提交成功后,直接使用window.location.href
或window.location.replace
进行页面重定向。这种方法不需要额外引入React Router,但需要注意与Redux的状态管理相结合时可能存在一些问题,如重新加载页面会导致Redux的状态重置等。示例代码:
const MyForm = () => {
const onSubmit = () => {
// 提交表单逻辑
// ...
// 表单提交成功后重定向到指定页面
window.location.href = '/success-page';
// 或者
// window.location.replace('/success-page');
}
return (
<form onSubmit={onSubmit}>
{/* 表单内容 */}
</form>
);
}
总结:
history.push
进行重定向。window.location.href
或window.location.replace
进行页面重定向,但需要注意可能存在的一些问题。领取专属 10元无门槛券
手把手带您无忧上云