Нажмите кнопку отправки формы внутри компонента ссылки

Question

Кнопка отправки в форме должна выполнить назначенную ей функцию и закрыть компонент, вернувшись на домашнюю страницу, но если вы обернете кнопку компонентом Ссылка, функция будет отменена. Есть идеи как этого избежать?

<Link to={{ pathname: "/"}} ><button type="submit" value="Submit">Save</button></Link>

handleEditFormSubmit = (index, e) => {
  if (!this.canBeSubmitted()) {
    e.preventDefault();
    return alert("Please fill all empty text spaces");
  } 
  e.preventDefault();
  let products = [...this.state.products];
  products.splice(index, 1, {name: this.state.name,
    ean: this.state.ean,
    type: this.state.type,
    weight: this.state.weight,
    color: this.state.color,
    active: false})
  this.setState({ products, name: "", ean: "", type: "", weight: "", color: "", active: false},
  () => {
    this.props.history.push("/");
  }
  );
  }

Answer 1

Лучший способ перенаправить на домашнюю страницу - использовать историю внутри функции.

submitHandler=()=>{
  //do all operation here after this navigate to home page like below example.
   this.props.history.push("/");
}

пример для справки

  submitHandler=()=>{
   this.setState({name:'Hello'},()=>{
     this.props.history.push("/");
   })
  }

Вы можете проверить эту рабочую демонстрацию и понять, как до.

https://codesandbox.io/s/react-router-46dw8