Question

我正在尝试将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>

如果有帮助，Form本身由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>
    )
}

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

Answer 2

创建onSubmit处理程序，并在内部创建到另一个页面的过渡：

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

不必使用它的Link组件

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

2 个答案: