对于 http://localhost:3000/?#!/login 中 hashbang 前面的?所引发的困惑

[devwolf]

最近接手了一个商城优化的 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 友有没有遇到过同样问题的前人

[ss098]

是不是你们的 form 标签登录时被触发提交。

[devwolf]

@ss098 一语中的啊，旧代码里用的是
<Form onSubmit={this.handleSubmit}></Form>
结合
<Button type="primary" htmlType="submit"
className="login-form-button">
登录
</Button>
我借着提示，替换成了 onClick 提交就没有出现这个问号了(旧代码也没用上封装给 onSubmit 的参数 e),
原来这方面出错会导致这样的问题啊，我再查查

[lihongming]

用 onSubmit 不是问题，用户就不必点按钮提交，还可以按回车提交。


问题是你的 handler 里面应该有一句 e.preventDefault()来阻止默认动作（提交表单）

[devwolf]

感谢#3 的老哥提供进一步讲解。
这类问题关键字应该是"submit 事件"了。
今天顺着 3 楼思路，又在 Form 组件的 onSubmit 的绑定方法里添上了 e.preventDefault()同样成功解决了问题。
对于阻止默认动作的位置(我怎么就没有这种好奇心)，还在 https://www.cnblogs.com/frogblog/p/9172161.html
这篇博客里得到另一个尝试"如果没有阻止点击事件浏览器默认行为会紧接着触发 form 表单提交事件;
--如果阻止点击事件浏览器默认行为，不管是回车提交还是点击按钮提交都不会再触发 form 表单提交事件"