将 react-router 链接包装在 html 按钮中作为提交选项答案

【问题标题】：Wrapping a react-router Link in an html button as a submit option将 react-router 链接包装在 html 按钮中作为提交选项
【发布时间】：2019-04-13 07:56:42
【问题描述】：

我正在尝试将 react-router 链接包装在提交按钮中。我知道有这个选项：Wrapping a react-router link in an html button，但它不处理提交本身。

我有这样的想法：

<button type='submit'>
  <Link to={{pathname : "/user/signup", search:"?page=sectionTwo"}} >
    CONTINUE
  </Link>  
</button>

表单本身由 Formik 处理，如果有帮助的话。

【问题讨论】：

你为什么要这样做？你想达到什么目的？在按钮内嵌套链接是自找麻烦。
嗯，总体目标是让三个子页面在用户完成表单并继续点击时具有动画过渡的不同页面上。这会更改 url，以便用户可以使用“返回”浏览器按钮返回到以前的表单，并且在那里写入的信息不会丢失。我将孩子们包裹在withFormik() (formik npm) 和withRouter() 中。父级有一个 BrowserRouter 渲染子级，我设法将子级值传递给 url (location.state) 但我无法提取它，因为它不会在 url 更新时重新渲染。叹息 :) 对不起...我有点不适应

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

我假设你有

<form onSubmit={someFunction}> 
// Your submit button somewhere here
</form>

当用户单击提交按钮时，您希望将用户重定向到不同的页面。我会这样处理它，

constructor(props) {
    super(props);
    this.state = { redirect: false }
}

handleSubmit() {
    // do some check before setting redirect to true
    this.setState({ redirect: true });
}

render() {
    // you could reset the this.state.redirect to false here before redirecting a user
    if (this.state.redirect) return <Redirect to='some url' />;
    else return (
         <div>
             <form onSubmit={this.handleSubmit.bind(this)}>
                 <button type='submit'> Continue </button>
             </form>
         </div>
    )
}

想法是当用户单击提交时，它会更新状态，重新渲染组件并查看重定向是否为真，如果是则将用户重定向到页面。我认为包装不应用作按钮的 Link 很尴尬-IMO。

【讨论】：

是的，我同意按钮内的链接，我只是有一个非常奇怪的设置可以使用，我不知道该怎么做。我的孩子们被包裹在两个 HOC 中，需要在彼此之间共享表单数据，同时留下浏览器历史记录并在转换时获得动画效果。有点疼呵呵

【解决方案2】：

创建 onSubmit 处理程序并在内部创建到另一个页面的转换：

onSubmit = (value) => {
  const { history } = props;
  history.push('your link');
}

而且不必使用Link组件

【讨论】：

确保包装你的组件 withRouter HOC 或者组件应该是 <Route> 组件的直接子组件