ReactJS与React Router - Chrome浏览器下奇怪的路由行为

Question

这有点奇怪，我想要找出它的底细。

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

为此，我有两个路由。主路由和“已注册”路由。

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

在第一页，当用户输入电子邮件地址并点击按钮时，我会发起POST AJAX请求将电子邮件地址保存到我的后端数据库中（使用Axios包），完成后跳转到“signed-up”路由。

  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上一切正常。这让我想到可能与我的路由路径或参数有关。有什么想法吗？

- ericbae

---

你尝试过使用HistoryLocation API吗？而不是哈希URL。 - Henrik Andersson

Answer 1

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

所以你的组件里有类似这样的代码（es6语法）:

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

submit() {
    // Ajax request here
}

问题在于Chrome会尝试发送一个GET请求，并在当前URL后面添加一个问号?，因为你的表单标签中没有action="/formsubmit"属性，它默认认为是method="get"。所以Chrome会取当前的URL（例如myapp.com/#/）并试图将表单提交到myapp.com/?#/，这是一个新的URL。

为了防止这种情况发生，只需要在提交表单时添加一个preventDefault即可。

submit(e) {
    e.preventDefault()
    // Ajax request here
}

- martpie

---

如果可以的话，我会点击上箭头10次。我曾经在Angular 2 RC6中遇到过这种情况，花了几天时间追踪路由器，试图弄清楚发生了什么。然后我在这里看到了你的解释——烟花和教堂钟声！我不知道单击非提交按钮会导致提交。最终，为了解决我的问题，我只需要将<button>更改为<span>。感谢您分享您的见解！ - ckapilla

@ckapilla，我鼓励你使用<button>标签，因为它更符合语义化，并且可以使代码更清晰：对于表单提交，你应该始终使用submit事件，如果需要的话，还要使用preventDefault。 - martpie

@KeitlG，感谢您的建议，但在我的情况下，我不想进行表单提交，只是链接到另一个表单。没有任何意图却发生了提交，这让我感到困惑。 - ckapilla