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

Question

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

我有这样的想法:

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

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

Answer 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>
    )
}

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