如何使用 React Link 组件提交表单？答案

【问题标题】：How to submit form with React Link component?如何使用 React Link 组件提交表单？
【发布时间】：2021-07-06 04:24:48
【问题描述】：

我在我的 React 项目中使用 BrowserRouter，但是有一个表单页面，我想在其中使用 Link 组件：提交表单并将我重定向到主页而不重新加载页面。

<form onSubmit={handleSubmit}>

   /* blablabla */

   <Link to={`/homepage`} className="button">
       Home
   </Link>

</form>

但由于链接是一个“a”组件，我无法将其设为“type=submit”。所以我的问题不在于如何重定向到主页，因为它有效，我的问题是我还想提交表单。

如何使用 Link React 组件重定向到主页而不重新加载页面并且还提交表单。

【问题讨论】：

这能回答你的问题吗？ React Router v4 <Link> for Form
我不是真的在上课
这里无关紧要。同样的解决方案也适用。
@jmargolisvt 在我解释它时，我需要有我推送“/homepage”的道具。但是我在哪里可以得到道具以及如何在链接中应用它？
您可以在提交表单后使用 react 路由器以编程方式导航。

标签： reactjs react-router

【解决方案1】：

在您的提交功能中尝试使用 useHistory

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


export default function App() {
  let history = useHistory();

  const handleSubmit = e => {
   e.preventDefault();
   e.stopPropagation();
   ...                                
   history.push("/homepage");
  };

  return (
   <form onSubmit={handleSubmit}>
     ...
     <button type="submit">Create</button>
   </form>
  )
};

演示：Stackblitz

【讨论】：

非常感谢，这就是我要找的！然而，我的整个目标是我想在让用户提交之前验证一些表单字段。此方法覆盖输入字段上的“必需”内容，不知何故它不会停止提交。无论如何，一个“if”案例解决了这个问题。再次感谢！
@Pettko 是的，您需要在重定向之前使用条件来验证输入字段是否为空。您可以在此处查看 2 个带有验证和重定向的演示（第一个使用 react-boostrap，第二个使用 Material-ui 和 react-hook-form）-> stackoverflow.com/questions/66676556/…