Reactjs 在没有提示的情况下防止反应路由器转换

如果表单无效，我希望防止从表单转移。这样做并不令人满意，因为我想完全阻止用户导航到新路线，直到表单有效，而提示似乎总是为用户提供继续的选项，并且希望在我的页面上显示错误消息，而不是侵入性提示

在没有提示的情况下，如何防止此转换

我的表格：

    <form>
      <div>
        <label>Name: </label>
        <input
          type="text"
          name="name"
          id="name"
          onChange={this.handleChange}
          autoComplete="name"
        />
      </div>
      <div>
        <label>Email: </label>
        <input
          type="text"
          name="email"
          id="email"
          onChange={this.handleChange}
          autoComplete="email"
        />
      </div>
      <div>
        <label>Password: </label>
        <input
          type="password"
          name="password"
          id="password"
          onChange={this.handleChange}
          autoComplete="new-password"
        />
      </div>
      <br />
      <div>

        <!-- HERE IS THE LINK I WANT TO DISABLE IN CASE OF INVALID FORM -->

        <Link when={this.state.formIsValid} to="/F2">
          <button
            onClick={() => {
              if (this.formIsValid()) {
                this.props.updatePurchaseRecord({
                  name: this.state.name,
                  email: this.state.email,
                  password: this.state.password,
                  purchase_id: this.props.purchase_id
                });
              }
            }}
          >
            Next
          </button>
        </Link>
      </div>
    </form> 

---

如果表单无效，为什么不直接呈现按钮的禁用版本？例如：

formIsValid ? <RealButton /> : <DisabledButton />

---

这是否允许我在单击按钮后执行验证？在用户尝试单击按钮之前，我不想显示错误消息，这样就不会显得过早。我想我可以在onMouseOver事件中验证该按钮。您可以创建第二个单击处理程序来处理禁用按钮的单击。或者，当用户单击离开输入字段时，您可以验证onBlur。如果用户有12种方法可以导航离开页面，而我希望防止将页面留在一个位置，该怎么办？实际上，我想显示我自己的模式，而不是浏览器模式。。并包括刷新页面、后退按钮等。请看这里：

formIsValid ? <RealButton /> : <DisabledButton />