对于 http://localhost:3000/?#!/login 中 hashbang 前面的?所引发的困惑
devwolf · yctjb1 · 2020-05-05 15:27:52 +08:00 · 2597 次点击这是一个创建于 1700 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近接手了一个商城优化的 react 项目，从 https://blog.csdn.net/zeping891103/article/details/84846221 中得知了 react-router 原来还有个 hashType 的配置， slash 对应#/ noslash 对应# hashbang 对应这次出问题的商城里所使用的#!
现在的问题看起来是“登录操作会刷新一次页面从而使 http://localhost:3000/#!/login 替换成了 http://localhost:3000/?#!/login 导致必须登录两次”
关键字也不知道半天也没查出什么名堂，想问一下这个 hash 标识前的?是何物
，或者出于什么错误产生的。
项目里使用的是 mirrorx,封装了 react-routerv4, 错误的重定向产生了这个问题?不规范的 axios.interceptors 拦截器产生了这个问题?antd 中 form 的 api 方法错误使用导致了这个问题? 排查的方向有点大，想问问 V 友有没有遇到过同样问题的前人
 |
1
ss098 2020-05-05 15:36:36 +08:00  1
是不是你们的 form 标签登录时被触发提交。
|
 |
2
devwolf OP @ss098 一语中的啊，旧代码里用的是
<Form onSubmit={this.handleSubmit}></Form> 结合 <Button type="primary" htmlType="submit" className="login-form-button"> 登录 </Button> 我借着提示，替换成了 onClick 提交就没有出现这个问号了(旧代码也没用上封装给 onSubmit 的参数 e), 原来这方面出错会导致这样的问题啊，我再查查 |
 |
3
lihongming 2020-05-06 01:58:56 +08:00 via iPhone 2
用 onSubmit 不是问题，用户就不必点按钮提交，还可以按回车提交。
问题是你的 handler 里面应该有一句 e.preventDefault()来阻止默认动作（提交表单） |
|
4
devwolf OP 感谢#3 的老哥提供进一步讲解。
这类问题关键字应该是"submit 事件"了。 今天顺着 3 楼思路，又在 Form 组件的 onSubmit 的绑定方法里添上了 e.preventDefault()同样成功解决了问题。 对于阻止默认动作的位置(我怎么就没有这种好奇心)，还在 https://www.cnblogs.com/frogblog/p/9172161.html 这篇博客里得到另一个尝试"如果没有阻止点击事件浏览器默认行为会紧接着触发 form 表单提交事件; --如果阻止点击事件浏览器默认行为，不管是回车提交还是点击按钮提交都不会再触发 form 表单提交事件" |
Select Language