未分類
15 5 月 2020

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

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

資深大佬 : devwolf 11

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

大佬有話說 (4)

  • 資深大佬 : 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 表单提交事件”