javascript - ReactJS with React Router - strange routing behaviour on Chrome -
this bit weird , bottom of it.
i have page users type in email address , click button , show "you're signed up!" message - simple.
for that, have 2 routes. main route , "signed-up" route.
<route name="app" path="/" handler={main}> <route name="signed-up" path="signed-up" handler={signedup} /> <defaultroute handler={signup} /> </route>
on first page, when users type in email address , click button, fire post ajax save email address on backend db (using axios package) , when it's completed, go "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) => { // display signed page router.transitionto("signed-up"); }); }
now when first type in url of page
http://localhost:1338
browsers (chrome, firefox, safari), seem change url to
http://localhost:1338/#/
fair enough. in firefox, type in email , click submit button, works , takes me
http://localhost:1338/#/signed-up
now on chrome, however, when click on submit, doesn't change route. in fact, on developer console, see error.
first, why "post" request cancelled? second, when happens, chrome un-responsive. refresh page, chrome's "navy screen death"..
now, funnily enough, if change initial url to
http://localhost:1338/?#/
(inserting question mark in front of hash), things work fine on chrome. so, makes me wonder it's route paths or parameters.
any ideas?
just faced problem few hours ago.
so have in component (es6 syntax):
render() { return ( <form onsubmit={ this.submit.bind(this) }> { /* inputs stuff here */ } </form> ); } submit() { // ajax request here }
the problem chrome try send request, , appends ?
current url, because don't have action="/formsubmit"
in form tag , thinks method="get"
, default. chrome take current url (for example myapp.com/#/
) , tries send form @ myapp.com/?#/
, new url.
to prevent that, add preventdefault when submit form
submit(e) { e.preventdefault() // ajax request here }
Comments
Post a Comment