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

ant-design 官网路由跳转后保持当前页同时显示 nprogress 效果怎么实现?

  •  
  •   realJamespond · 223 天前 · 2131 次点击
    这是一个创建于 223 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://ant-design.antgroup.com/components/cascader-cn
    1 ,跳转不同地址时保持当前页面不变(但是地址已经变化),等分割的模块代码加载完成后再切换到新模块显示。 2 ,umi 默认是立即显示 loading 组件
    3 ,nextjs 是保地址不变先加载模块,加载完成后再切换地址
    但最好还是第一种方案先跳转 url ,再等待加载模块

    10 条回复    2024-05-10 14:39:34 +08:00
    web1996
        1
    web1996  
       223 天前 via Android
    react router v6 数据路由试试
    ljyst
        2
    ljyst  
       223 天前
    这个效果得参考文档
    AEP203
        3
    AEP203  
       223 天前
    不就是 history.pushState 吗
    Charrlles
        4
    Charrlles  
       223 天前 via iPhone
    看了下仓库,ant design 的文档是用 dumi 生成的,具体怎么实现暂时没找到
    realJamespond
        5
    realJamespond  
    OP
       223 天前
    @Charrlles 对,刚看了是自定义了 Link 实现的
    epiloguess
        6
    epiloguess  
       223 天前
    其实和 github 的 repos 页面很类似啊,都加了个 progress,只不过一个提前将地址栏推送过去了.
    https://github.com/ant-design

    github 是在 body 上面加了个 turbo-progress-bar ,然后通过 html 标签的数据属性 aria-busy ,从 width=10%开始递增
    antd 是在 html 加了个类,body 末尾加了个 progress,不过这个过程很短你不一定看得见,你把网络断开,再点一个没点过的,就能看的很明白了.

    不过,这些可能你都懂吧..我的意思是,地址只是表象,毕竟在客户端导航中没有发生跳转,都是 js 在操作

    除了这两种类似的方案,还有一些别的有意思的方案,比如说,astro 为了配合 viewtransition,在 document 上,实现了一套生命周期,,astro:before-preparation,在准备阶段开始时触发的事件,导航开始后(例如,用户点击链接后),但在加载内容之前。这样也能解决 loading 的问题.
    https://docs.astro.build/zh-cn/guides/view-transitions/#astrobefore-preparation
    epiloguess
        7
    epiloguess  
       223 天前
    除此以外,prefetch+动态导入,配合之下,基本可以完全消灭进度条...
    realJamespond
        9
    realJamespond  
    OP
       223 天前
    @Wxh16144 最好是用 useTransition 这个特性实现
    Wxh16144
        10
    Wxh16144  
       223 天前
    @realJamespond 我对 react 这些 api 不是很熟悉,如果你可以去提交 PR 的话就好了,我还能顺便学习一下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5363 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 07:10 · PVG 15:10 · LAX 23:10 · JFK 02:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.