ant-design 官网路由跳转后保持当前页同时显示 nprogress 效果怎么实现？
realJmespond 2024-05-09 18:13:11 +08:00 2808 次点击这是一个创建于 520 天前的主题，其中的信息可能已经有所发展或是发生改变。
https://ant-design.antgroup.com/components/cascader-cn
1 ，跳转不同地址时保持当前页面不变（但是地址已经变化），等分割的模块代码加载完成后再切换到新模块显示。 2 ，umi 默认是立即显示 loading 组件
3 ，nextjs 是保地址不变先加载模块，加载完成后再切换地址
但最好还是第一种方案先跳转 url ，再等待加载模块
 | 1 web1996 2024-05-09 18:51:52 +08:00 via Android react router v6 数据路由试试 |
 | 2 ljyst 2024-05-09 18:55:33 +08:00 这个效果得参考文档 |
 | 3 AEP203 2024-05-09 22:00:47 +08:00 不就是 history.pushState 吗 |
 | 4 Charrlles 2024-05-10 09:54:25 +08:00 via iPhone 看了下仓库，ant design 的文档是用 dumi 生成的，具体怎么实现暂时没找到 |
 | 5 realJamespond OP @Charrlles 对，刚看了是自定义了 Link 实现的 |
 | 6 epiloguess 2024-05-10 14:06:48 +08:00 其实和 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 |
| 7 epiloguess 2024-05-10 14:09:12 +08:00 除此以外,prefetch+动态导入,配合之下,基本可以完全消灭进度条... |
 | 8 Wxh16144 2024-05-10 14:21:12 +08:00 |
| 9 realJamespond OP @Wxh16144 最好是用 useTransition 这个特性实现 |
| 10 Wxh16144 2024-05-10 14:39:34 +08:00 @realJamespond 我对 react 这些 api 不是很熟悉，如果你可以去提交 PR 的话就好了，我还能顺便学习一下 |
Select Language