ReactJS与React路由器 - Chrome上的奇怪路由行为 [英] ReactJS with React Router - strange routing behaviour on Chrome

问题描述

这有点奇怪，我想深究它。

This is a bit weird and I would like to get to the bottom of it.

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

I have a page where users type in their email address and click a button and then I show "you're signed up!" message - simple.

为此，我有两条路线。主要路线和已注册路线。

For that, I have two routes. The main route and the "signed-up" route.

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

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

On the first page, when users type in the email address and click the button, I fire POST AJAX to save the email address on my backend DB (using Axios package) and when it's completed, I go to the "signed-up" route.

  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");
    });
  }

现在当我第一次输入我的网页的网址时

Now when I first type in the URL of my page

http://localhost:1338

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

Browsers (Chrome, FireFox, Safari), all seem to change the URL to

http://localhost:1338/#/

足够公平。在FireFox中，我输入一封电子邮件并点击提交按钮，一切正常并带我去

Fair enough. In FireFox, I type in an email and click the submit button, it all works well and takes me to

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

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

Now on Chrome, however, when I click on the submit, it doesn't change the route. In fact, on developer console, I see an error.

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

First, why was the "post" request cancelled? Second, when this happens, Chrome is un-responsive. So I refresh the page, then I get Chrome's "navy screen death"..

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

Now, funnily enough, if I change the initial URL to

http://localhost:1338/?#/

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

(inserting the question mark in front of hash), then things work fine on Chrome. So, it makes me wonder that it's something to do with my route paths or parameters.

任何想法？

推荐答案

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

Just faced this problem a few hours ago.

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

So you have something like that in your component (es6 syntax):

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

submit() {
    // Ajax request here
}

问题是Chrome尝试发送获取请求，并将？附加到您当前的网址，因为您没有您的表单标记中的任何 action =/ formsubmit，它认为它是 method =get，by默认。因此Chrome会获取当前网址（例如 myapp.com /＃/ ）并尝试在 myapp.com /？＃/ ，这是一个新网址。

The problem is that Chrome try to send a get request, and appends a ? to your current URL, because you don't have any action="/formsubmit" in your form tag and it thinks it is a method="get", by default. So Chrome take the current URL (for example myapp.com/#/) and tries to send form at myapp.com/?#/, which is a new URL.

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

To prevent that, simply add a preventDefault when you submit your form

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

这篇关于ReactJS与React路由器 - Chrome上的奇怪路由行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！