ReactJS with React Router - strange routing behaviour on Chrome

Question

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>

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

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

http://localhost:1338/#/

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

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.

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/?#/

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

Any ideas?

Answer 1

Just faced this problem a few hours ago.

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
}

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.

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

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