带有 React Router 的 ReactJS - 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");
    });
  }

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

Now when I first type in the URL of my page

http://localhost:1338

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

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"..

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

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 尝试发送一个 get 请求，并将 ? 附加到您当前的 URL，因为您没有任何 action="/formsubmit" 在您的表单标签中，默认情况下它认为它是一个 method="get".所以 Chrome 获取当前 URL(例如 myapp.com/#/)并尝试在 myapp.com/?#/ 发送表单，这是一个新的 URL.

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
}

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