这有点奇怪,我想深入了解它。
我有一个页面,用户输入他们的电子邮件地址并单击一个按钮,然后我会显示“您已注册!”消息 - 简单。
为此,我有两条路线。主要路线和“签约”路线。
<Route name="app" path="/" handler={Main}>
<Route name="signed-up" path="signed-up" handler={SignedUp} />
<DefaultRoute handler={Signup} />
</Route>
在第一页上,当用户输入电子邮件地址并单击按钮时,我触发 POST AJAX 以将电子邮件地址保存在我的后端数据库中(使用 Axios 包),完成后,我转到“注册”路线.
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 时
http://localhost:1338
浏览器(Chrome、FireFox、Safari),似乎都将 URL 更改为
http://localhost:1338/#/
很公平。在 FireFox 中,我输入一封电子邮件并单击提交按钮,一切正常并带我到
http://localhost:1338/#/signed-up
然而,现在在 Chrome 上,当我点击提交时,它不会改变路线。事实上,在开发者控制台上,我看到了一个错误。
首先,为什么“post”请求被取消了?其次,当发生这种情况时,Chrome 没有响应。所以我刷新了页面,然后我得到了 Chrome 的“海军屏幕死亡”..
现在,有趣的是,如果我将初始 URL 更改为
http://localhost:1338/?#/
(在哈希前面插入问号),然后在 Chrome 上一切正常。所以,这让我想知道这与我的路线路径或参数有关。
有任何想法吗?
最佳答案
几个小时前刚遇到这个问题。
所以你的组件中有类似的东西(es6 语法):
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。为了防止这种情况,只需在提交表单时添加一个 preventDefault
submit(e) {
e.preventDefault()
// Ajax request here
}
关于javascript - 带有 React Router 的 ReactJS - Chrome 上的奇怪路由行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31305744/