React类组件中handleSubmit执行完成后如何跳转页面？

你当前代码里直接用useNavigate()是错误的——useNavigate是React Router的Hook，只能在函数组件或自定义Hook中使用，类组件无法直接调用Hook。下面给你两种可行的解决办法：

方法一：用高阶组件给类组件注入导航能力 #

如果是React Router v5及以下版本，可以直接用内置的withRouter高阶组件；v6版本需要自己封装一个，具体如下：

React Router v5及以下版本代码示例 #

import { withRouter } from 'react-router-dom';

class Signup extends Component {
  handleSubmit = async (e) => {
    e.preventDefault();
    // 这里写你的表单提交逻辑（比如接口请求、数据校验等）
    // ...
    
    // 提交完成后执行重定向
    this.props.history.push("/");
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* 你的表单元素 */}
      </form>
    );
  }
}

// 用withRouter包裹组件，让组件能通过props拿到history对象
export default withRouter(Signup);

React Router v6版本代码示例 #

v6移除了内置的withRouter，需要自己封装一个：

import { useNavigate, useLocation, useParams } from 'react-router-dom';

// 自定义withRouter高阶组件
const withRouter = (Component) => {
  const Wrapper = (props) => {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    return <Component {...props} navigate={navigate} location={location} params={params} />;
  };
  return Wrapper;
};

class Signup extends Component {
  handleSubmit = async (e) => {
    e.preventDefault();
    // 表单提交逻辑...
    
    // 提交完成后重定向
    this.props.navigate("/");
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* 你的表单元素 */}
      </form>
    );
  }
}

// 用自定义的withRouter包裹组件
export default withRouter(Signup);

方法二：将类组件转为函数组件（推荐） #

React Router v6官方更推荐使用函数组件+Hook的写法，直接用useNavigate即可：

import { useNavigate } from 'react-router-dom';

const Signup = () => {
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 表单提交逻辑...
    
    // 提交完成后重定向
    navigate("/");
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 你的表单元素 */}
    </form>
  );
};

export default Signup;

内容的提问来源于stack exchange，提问作者Malica