React-router: [question] Chrome appends a '?' before '#'

Created on 14 Sep 2015 · 7Comments · Source: ReactTraining/react-router

Hello, I'm currently building a webapp using react-router 0.13.3.

I'm struggling with a chrome problem. I've read the docs, stackoverflowed as much as I can but I didn't find a solution.

Using Chrome, when I go to http://myapp.com/, the url becomes http://myapp.com/#/. And that's ok. But when I do log in my app (still the same url), the url now becomes http://myapp.com/?#/, and then, the whole page reloads (url change I guess). All other browsers work fine and keep only the /#/example without getting a question mark before .

can you help me ?

Source

martpie

Most helpful comment

Got it. If anyone needs the answer:

Imagine you have a form:

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 ? at your actual URL, because you don't have any action="/formsubmit" in your form tag. So Chrome take the current URL (for example myapp.com/#/) and try 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
}

sorry for the inconvenience, this has nothing to do with react-router

martpie on 14 Sep 2015

👍20 🎉9

All 7 comments

something with your app, 0.13 HashLocation doesn't mess w/ anything but the hash portion of the url.

ryanflorence on 14 Sep 2015

Got it. If anyone needs the answer:

Imagine you have a form:

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

submit() {
    // Ajax request here
}

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

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

sorry for the inconvenience, this has nothing to do with react-router

martpie on 14 Sep 2015

👍20 🎉9

@KeitIG Hi, I have 2 forms with onKeyPress handler like this:

<form onKeyPress={this.handleSubmitEnter.bind(this)} >...</form>

and the handler is

handleSubmitEnter(e) {
  if(e.key == 'Enter') {
    this.context.router.push({
      pathname: '/xxx'
    });
  }
}

One is working fine but the other will get a '?' at the url. Is this chrome's problem for this inconsistency or it is just my code?

Anyway, I added e.preventDefault() to the second handler and it is working as expected. Thank you for your solution!

Onionz on 21 Apr 2016

@OnionCoder: yup, Enter keypress would trigger a form submit, that's why ;)

martpie on 22 Apr 2016

👍1

@KeitIG - thank you so much for coming back to a closed topic an posting a solution. I am sure it would take me ages to figure that out on my own!

I had this issue after handling a button click that happened to be inside a form. I had to set type="button" to prevent the issue, as the default value for button is submit.

hugofelp on 4 Aug 2016

👍5

@hugofelp Thank you -> type=button as opposed to type=submit cleared up the /? from being added to the url when the form button was pressed. In my .done ajax handler I had to manually close the form (modal) and set where to return too in the html like:
.done(function(data, statusText, xhr){
$('h1#thanks').html();
$('#myModal').modal('hide');
});