在使用react的fetch post方法后重定向不起作用

在使用React的fetch post方法后重定向不起作用是由于fetch是基于Promise的异步请求，在请求结束之前，浏览器会继续执行后续的代码，从而导致重定向无效。

为了解决这个问题，可以使用浏览器提供的history对象来实现重定向。history对象提供了一系列的方法，可以控制浏览器的历史记录。在React中，可以通过react-router-dom库中的 useHistory hook 来获取history对象，然后使用push方法实现重定向。

以下是解决方案的步骤：

1. 首先，确保已经安装了react-router-dom库：npm install react-router-dom
2. 在需要进行重定向的组件中引入useHistory hook：import { useHistory } from 'react-router-dom';
3. 在组件中调用useHistory hook获取history对象：const history = useHistory();
4. 在fetch请求的回调函数中，使用history对象的push方法实现重定向，例如：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）等。您可以在腾讯云官网了解更多详情：腾讯云。