在使用React的fetch post方法后重定向不起作用是由于fetch是基于Promise的异步请求,在请求结束之前,浏览器会继续执行后续的代码,从而导致重定向无效。
为了解决这个问题,可以使用浏览器提供的history对象来实现重定向。history对象提供了一系列的方法,可以控制浏览器的历史记录。在React中,可以通过react-router-dom库中的 useHistory hook 来获取history对象,然后使用push方法实现重定向。
以下是解决方案的步骤:
npm install react-router-dom
import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push('/new-route');
完整的示例代码如下:
import React from 'react';
import { useHistory } from 'react-router-dom';
const MyComponent = () => {
const history = useHistory();
const handleFormSubmit = () => {
fetch('https://example.com/api', {
method: 'POST',
body: JSON.stringify(data)
})
.then(response => {
if(response.ok) {
// 请求成功,进行重定向
history.push('/new-route');
} else {
// 请求失败,进行错误处理
}
})
.catch(error => {
// 发生错误,进行错误处理
});
}
return (
<form onSubmit={handleFormSubmit}>
{/* 表单内容 */}
</form>
);
}
export default MyComponent;
以上代码中,当fetch请求成功后,通过调用history对象的push方法,将页面重定向到/new-route
路由。
推荐的腾讯云相关产品:云服务器(CVM)、内容分发网络(CDN)、云存储(COS)等。您可以在腾讯云官网了解更多详情:腾讯云。
领取专属 10元无门槛券
手把手带您无忧上云