首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
React
devwolf
V2EX  ›  React

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

  •  
  •   devwolf · 27 天前 · 1044 次点击

    最近接手了一个商城优化的 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 条回复    2020-05-06 09:17:55 +08:00
    ss098
        1
    ss098   27 天前   ❤️ 1
    是不是你们的 form 标签登录时被触发提交。
    devwolf
        2
    devwolf   27 天前
    @ss098 一语中的啊,旧代码里用的是
    <Form onSubmit={this.handleSubmit}></Form>
    结合
    <Button type="primary" htmlType="submit"
    className="login-form-button">
    登录
    </Button>
    我借着提示,替换成了 onClick 提交就没有出现这个问号了(旧代码也没用上封装给 onSubmit 的参数 e),
    原来这方面出错会导致这样的问题啊,我再查查
    lihongming
        3
    lihongming   27 天前 via iPhone   ❤️ 2
    用 onSubmit 不是问题,用户就不必点按钮提交,还可以按回车提交。


    问题是你的 handler 里面应该有一句 e.preventDefault()来阻止默认动作(提交表单)
    devwolf
        4
    devwolf   27 天前
    感谢#3 的老哥提供进一步讲解。
    这类问题关键字应该是"submit 事件"了。
    今天顺着 3 楼思路,又在 Form 组件的 onSubmit 的绑定方法里添上了 e.preventDefault()同样成功解决了问题。
    对于阻止默认动作的位置(我怎么就没有这种好奇心),还在 https://www.cnblogs.com/frogblog/p/9172161.html
    这篇博客里得到另一个尝试"如果没有阻止点击事件浏览器默认行为会紧接着触发 form 表单提交事件;
    --如果阻止点击事件浏览器默认行为,不管是回车提交还是点击按钮提交都不会再触发 form 表单提交事件"
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4028 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 05:31 · PVG 13:31 · LAX 22:31 · JFK 01:31
    ♥ Do have faith in what you're doing.