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

Posted 2023-03-28

【中文标题】ReactJS with React Router - Chrome 上奇怪的路由行为

【英文标题】：ReactJS with React Router - strange routing behaviour on Chrome

【发布时间】：2015-09-27 03:15:02

【问题描述】：

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

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

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

  <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 上，当我单击提交时，它不会更改路由。事实上，在开发者控制台上，我看到了一个错误。

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

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

http://localhost:1338/?#/

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

有什么想法吗？

【问题讨论】：

您是否尝试过仅使用 HistoryLocation API？而不是哈希网址。

【参考方案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

【讨论】：

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

@ckapilla 我鼓励你使用 标签，因为它在语义上更正确并且代码更简洁：对于表单提交，你应该始终使用 submit 事件，如果需要 + preventDefault .

@KeitlG 感谢您的输入，但在我的情况下，我不想提交表单，只是链接到另一个表单。提交是在没有任何意图的情况下发生的事实让我陷入了循环。