带有 React Router 的 ReactJS - Chrome 上的奇怪路由行为

IT技术 javascript reactjs axios
2021-03-30 21:46:03

这有点奇怪，我想深入了解它。

我有一个页面，用户输入他们的电子邮件地址并单击一个按钮，然后我会显示“您已注册！” 消息 - 简单。

为此，我有两条路线。主要路线和“签约”路线。

  <Route name="app" path="/" handler={Main}>
    <Route name="signed-up" path="signed-up" handler={SignedUp} />
    <DefaultRoute handler={Signup} />
  </Route>

在第一页上，当用户输入电子邮件地址并单击按钮时，我触发 POST AJAX 以将电子邮件地址保存在我的后端数据库中（使用 Axios 包），完成后，我转到“注册”路线.

  handleSubmit() {
    var router = this.context.router;
    var email  = this.refs.email.getDOMNode().value;
    this.refs.email.getDOMNode().value = '';

    helpers.postSignupEmail(email).then((response) => {
      // then display the signed up page
      router.transitionTo("signed-up");
    });
  }

现在当我第一次输入我的页面的 URL 时

http://localhost:1338

浏览器（Chrome、FireFox、Safari），似乎都将 URL 更改为

http://localhost:1338/#/

很公平。在 FireFox 中，我输入一封电子邮件并单击提交按钮，一切正常并带我到

http://localhost:1338/#/signed-up

然而，现在在 Chrome 上，当我点击提交时，它不会改变路线。事实上，在开发者控制台上，我看到了一个错误。

在此处输入图片说明

首先，为什么“post”请求被取消了？其次，当发生这种情况时，Chrome 没有响应。所以我刷新了页面，然后我得到了 Chrome 的“海军屏幕死亡”..

在此处输入图片说明

现在，有趣的是，如果我将初始 URL 更改为

http://localhost:1338/?#/

（在哈希前面插入问号），然后在 Chrome 上一切正常。所以，这让我想知道这与我的路线路径或参数有关。

有任何想法吗？

1个回答

几个小时前刚遇到这个问题。

所以你的组件中有类似的东西（es6 语法）：

render() {
    return (
        <form onSubmit={ this.submit.bind(this) }>
            { /* inputs stuff here */ }
        </form>
    );
}

submit() {
    // Ajax request here
}

问题是 Chrome 尝试发送一个 get 请求，并将 a 附加?到您当前的 URL，因为您action="/formsubmit"的表单标签中没有任何标签，并且method="get"默认情况下它认为它是 a 。所以 Chrome 获取当前 URL（例如myapp.com/#/）并尝试发送表单 at myapp.com/?#/，这是一个新的 URL。

为了防止这种情况，只需在提交表单时添加一个 preventDefault

submit(e) {
    e.preventDefault()
    // Ajax request here
}
如果可以的话，我会点击向上箭头 10 次。我在使用 Angular 2 RC6 时遇到过这种情况，并花了几天时间追赶我的尾巴，追踪路由器，试图弄清楚发生了什么。然后我在这里看到了你的解释——烟花和教堂钟声！我不知道点击非提交按钮会导致提交。最后，为了解决我的问题，我只需要将 <button> 更改为 <span>。感谢您分享您的见解！
2021-05-28 21:46:03
@ckapilla 我鼓励您使用 <button> 标签，因为它在语义上更正确，并且代码更简洁：对于表单提交，您应该始终使用提交事件，如果需要，请使用 + preventDefault。
2021-06-07 21:46:03
@KeitlG 感谢您的输入，但是在我的情况下，我不想提交表单，只是链接到另一个表单。提交是在没有任何意图的情况下发生的事实让我陷入了循环。
2021-06-11 21:46:03
其它你可能感兴趣的问题
上一篇Flux：等待特定事件 下一篇警告：文本内容不匹配。服务器：“我出去了” 客户：“我出去了” div