提交表单后如何跳转至其他页面？需添加何种代码？

嘿，我来帮你搞定这个表单提交后跳转的问题～其实核心就是利用React Router的跳转能力，配合redux-form的提交回调来实现，具体步骤和修改后的代码如下：

前提准备 #

首先确保你的项目已经安装并配置好了React Router（主流用v6版本，这里主要以此为例），如果还没装的话，先执行安装命令：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

具体代码修改步骤 #

1. 引入路由跳转钩子 #

在你的simple.js文件里，导入React Router的useNavigate钩子：

import React from 'react';
import { Field, reduxForm } from 'redux-form';
// 新增：导入useNavigate
import { useNavigate } from 'react-router-dom';

2. 在组件内获取跳转函数 #

在SimpleForm组件内部，调用useNavigate获取跳转方法：

const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  // 新增：获取navigate函数
  const navigate = useNavigate();

  // ... 其他代码
};

3. 定义提交成功后的处理函数 #

写一个处理表单提交的函数，这里可以先处理表单数据（比如发送给后端API），完成后执行跳转：

const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  const navigate = useNavigate();

  // 新增：提交处理函数
  const onFormSubmit = async (formData) => {
    // 第一步：处理表单数据，比如发送API请求
    try {
      // 示例：向后端提交数据
      await fetch('/api/user-info', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      // 第二步：提交成功后跳转目标页面，比如'/profile'或者'/success'
      navigate('/success');
    } catch (error) {
      // 处理提交失败的情况，比如提示用户
      console.error('表单提交失败:', error);
      alert('提交出错啦，请稍后重试～');
    }
  };

  // ... 原有的表单渲染代码
};

4. 将处理函数传给handleSubmit #

把刚才写的onFormSubmit传给redux-form的handleSubmit，替换原来的空回调：

return (
  <form onSubmit={handleSubmit(onFormSubmit)}> {/* 这里修改为handleSubmit(onFormSubmit) */}
    <div>
      <label>First Name</label>
      <div>
        <Field name="firstName" component="input" type="text" placeholder="First Name" required />
      </div>
    </div>
    {/* 其他表单字段... */}
    <div>
      <button type="submit" disabled={pristine || submitting}>Submit</button>
      <button type="button" disabled={pristine || submitting} onClick={reset}>Reset</button>
    </div>
  </form>
);

针对React Router v5的适配 #

如果你的项目用的是React Router v5，只需要把useNavigate换成useHistory即可：

// 导入useHistory
import { useHistory } from 'react-router-dom';

// 在组件内获取history对象
const history = useHistory();

// 跳转时用history.push
history.push('/success');

这样修改后，当用户填写完表单点击提交，只要数据处理完成（不管是同步还是异步），就会自动跳转到你指定的页面啦～

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