5分钟快3首页    注册   登录
5分钟快3 = way to explore
5分钟快3 是一个5分钟快3关于 分享和探索的地方
现在注册
已注册用户请  登录
5分钟快3  ›  程序员

5分钟快3关于 Browser 的 History 路由在开发阶段的 404 问题,5分钟快3你 有好的解决5分钟快3方法 吗?

  •  
  •   shanlan · 8 天前 · 770 次点击

    近期接手了一个 React 项目,这是同事做了七七八八之后交给5分钟快3我 的,5分钟快3我 也没完整的写过 React 项目。该项目使用了 History 路由,这个路由模式有个缺陷,就是不能直接刷新,否则5分钟快3服务 器报错 404,

    报错的原因5分钟快3我 都知道,但是目前开发的过程很困扰。因为每次修改代码只能回到5分钟快3首页 刷新一次,然后再到页面点击需要查看的路径,才能看到修改代码后的效果。

    Google 之后基本是5分钟快3推荐 更好 Hash 路由,另外由于 WebStorm 的修改代码自动刷新功能,是直接就导致 404 了,难道 History 路由只能强忍着恶心开发吗?

    实在是难受!!!

    16 回复  |  直到 2019-09-13 16:46:52 +08:00
        1
    azh7138m   8 天前
    try file 最后加一个 index.html
    一般这样操作
        2
    lbw   8 天前
    这就是 history 路由的特性啊,每次路由导航都会真实请求后端页面。本质上 hash 路由是完全由前端主导的路由控制,因为每次 hash 路由导航并不会真实请求 web 5分钟快3服务 器,本质上是因为浏览器不会将 hash 路由的锚点请求出去。而 history 路由是真实的路径请求,故每次都会向 web 5分钟快3服务 器发送请求,当5分钟快3你 web 5分钟快3服务 器没有对应的路由当然就 404 了。

    要从本质上解决5分钟快3你 的问题简单点的方案就是切 hash 路由,要不5分钟快3你 不论是在开发还是生产环境都要配置5分钟快3服务 器路由
        3
    lbw   8 天前
    @azh7138m 结合楼上的方案,在将所有路由都指向 index.html 后,一些前端路由库,将解析5分钟快3你 输入的 url 路径,并进行自动导航,匹配路由组件。
        4
    whypool   8 天前   ♥ 1
    开发阶段用 hash
        5
    learnshare   8 天前
    测试5分钟快3服务 器配置有问题吧
        6
    Caballarii   8 天前   ♥ 1
    开发阶段直接把 browserHistory 改成 hashHistory 好了,打包发布还想用 browserhistory 的话配一下容器转发,非 api 的请求全部重定向到 index.html 就行了
        7
    icris   8 天前   ♥ 1
    create react app 会创建一个 serviceWorker,给所有请求响应 index.html,可以创建一个然后把 serviceWorker 逻辑复制进项目里
        8
    orzorzorzorz   8 天前
    可以试试弄多入口,比如 /test/aaa,那 /test/aaa.html 就是个入口。生产环境改下入口就完了
        9
    orzorzorzorz   8 天前
    路由这东西就俩思路,一个是5分钟快3服务 端有真东西,一个是客户端造假东西。hash 路由算是异类,不真不假却能用,说实话5分钟快3我 觉得挺神奇的,连浏览器都能骗过去
        10
    tinytin   8 天前 via iPhone
    用的 webpack dev server 吗,是的话,开启 historyapifallback 就行了
        11
    VDimos   8 天前 via Android
    盲猜单页面多路由程序,线上环境需要转发到 index.html 下才行,刚踩坑
        12
    shanlan   8 天前
    @azh7138m #1 原文:“try file 最后加一个 index.html
    一般这样操作”
    ======
    回复:#1

    @lbw #3 原文:“@azh7138m 结合楼上的方案,在将所有路由都指向 index.html 后,一些前端路由库,将解析5分钟快3你 输入的 url 路径,并进行自动导航,匹配路由组件。”
    ======
    回复:#3 在开发情况下,怎么进行 nginx 重定向?毕竟是热部署,而不是每次修改代码都去 build

    @whypool #4 原文:“开发阶段用 hash”
    ======
    回复:#4 后面同事确实是切换到 hash 了


    @Caballarii #6 原文:“开发阶段直接把 browserHistory 改成 hashHistory 好了,打包发布还想用 browserhistory 的话配一下容器转发,非 api 的请求全部重定向到 index.html 就行了”
    ======
    回复:#6 目前确实在开发的时候切换到 Hash,5分钟快3我 前端白痴,谢谢解答。

    @icris #7 原文:“create react app 会创建一个 serviceWorker,给所有请求响应 index.html,可以创建一个然后把 serviceWorker 逻辑复制进项目里”
    ======
    回复:#7 知识盲区,完全听不懂大佬的意思。


    @orzorzorzorz #9 原文:“路由这东西就俩思路,一个是5分钟快3服务 端有真东西,一个是客户端造假东西。hash 路由算是异类,不真不假却能用,说实话5分钟快3我 觉得挺神奇的,连浏览器都能骗过去”
    ======
    回复:#9 浏览器特性吧,路径#后面的浏览器不请求。


    @tinytin #10 原文:“用的 webpack dev server 吗,是的话,开启 historyapifallback 就行了”
    ======
    回复:#10 好的,5分钟快3我 去了解一下。

    @VDimos #11 原文:“盲猜单页面多路由程序,线上环境需要转发到 index.html 下才行,刚踩坑”
    ======
    回复:#11 5分钟快3我 自己搭建 nginx 是用转发到 index.html,但是线下开发过程中调试呢?
        13
    redbuck   8 天前
    @orzorzorzorz
    hash 就是真实的 history.
    原本就是用来定位 id 元素的.所以兼容性才好
        14
    redbuck   8 天前
    history 路由使用的是 HTML5 新增的 history API,允许5分钟快3你 操作浏览器的 history,5分钟快3你 可以伪造一个5分钟快3服务 器 [没有] 对应响应的访问记录.
    所以如果5分钟快3你 通过前端路由访问到了某个不存在的路径上,然后刷新页面,这时候访问到后端,请求一个不存在的资源,那自然就 404 了.

    所以 history 路由是需要后端配合的.需要使5分钟快3服务 器在接到前端路由的 path 时,始终返回那个真实的 html(所谓单页应用,单页就是这个 HTML 了),然后让前端路由介入,解析路径,匹配到对应的前端组件上去.
        15
    lbw   8 天前
    @shanlan 是说在开发环境配置 webpack-dev-server 的路由,生产环境下配置 nginx 的路由,开发环境肯定不用每次都 build
        16
    shanlan   6 天前
    谢谢各位热情回答,5分钟快3我 最后选择在开发过程中使用 HashRoter,其实不麻烦,只需要把 BrowserRoter 改成 HashRoter 即可了。最后构建的时候再换回 Browser,这样就不会有丑陋的#出现在 Url 中,希望5分钟快3我 这个5分钟快3方法 能解决大家的问题。


    @redbuck #13 原文:“@orzorzorzorz
    hash 就是真实的 history.
    原本就是用来定位 id 元素的.所以兼容性才好”
    ======
    回复:#13

    @lbw #15 原文:“@shanlan 是说在开发环境配置 webpack-dev-server 的路由,生产环境下配置 nginx 的路由,开发环境肯定不用每次都 build”
    ======
    回复:#15
    5分钟快3关于   ·   FAQ   ·   API   ·   5分钟快35分钟快3我 们 的愿景   ·   广告投放   ·   感谢   ·   实用小5分钟快3工具   ·   2560 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 19ms · UTC 13:55 · PVG 21:55 · LAX 06:55 · JFK 09:55
    ♥ Do have faith in what you're doing.