如何在React中重定向和传递数据作为提交表单的道具？

在React中，可以使用React Router库来实现重定向和传递数据作为提交表单的道具。

重定向可以通过使用<Redirect>组件或编程式导航来实现。下面是两种方法的示例：

使用<Redirect>组件：

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

function MyComponent() {
  const [redirect, setRedirect] = useState(false);

  const handleFormSubmit = () => {
    // 处理表单提交逻辑
    setRedirect(true);
  };

  return (
    <div>
      {redirect && <Redirect to="/destination" />}
      <form onSubmit={handleFormSubmit}>
        {/* 表单内容 */}
        <button type="submit">提交</button>
      </form>
    </div>
  );
}

使用编程式导航：

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

function MyComponent() {
  const history = useHistory();

  const handleFormSubmit = () => {
    // 处理表单提交逻辑
    history.push('/destination');
  };

  return (
    <div>
      <form onSubmit={handleFormSubmit}>
        {/* 表单内容 */}
        <button type="submit">提交</button>
      </form>
    </div>
  );
}

在上述示例中，当表单提交时，handleFormSubmit函数会执行重定向操作，将用户导航到指定的目标路径。

如果需要传递数据作为提交表单的道具，可以使用React的状态管理工具（如useState）来保存表单数据，并在重定向或导航时将数据作为参数传递给目标组件。

例如，使用<Redirect>组件传递数据：

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

function MyComponent() {
  const [formData, setFormData] = useState({});
  const [redirect, setRedirect] = useState(false);

  const handleFormSubmit = () => {
    // 处理表单提交逻辑
    setRedirect(true);
  };

  return (
    <div>
      {redirect && <Redirect to={{ pathname: '/destination', state: formData }} />}
      <form onSubmit={handleFormSubmit}>
        {/* 表单内容 */}
        <button type="submit">提交</button>
      </form>
    </div>
  );
}

在目标组件中，可以通过props.location.state来获取传递的数据。

请注意，上述示例中使用的是React Router库来实现重定向和导航，你可以根据实际需求选择其他适合的路由库或自定义解决方案。

关于React Router库的更多信息和使用方法，你可以参考腾讯云的产品介绍链接：React Router产品介绍