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

278 天前
realJamespond  realJamespond

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

2245 次点击
所在节点   React  React
10 条回复
web1996
web1996
278 天前
react router v6 数据路由试试
ljyst
ljyst
278 天前
这个效果得参考文档
AEP203
AEP203
278 天前
不就是 history.pushState 吗
Charrlles
Charrlles
277 天前
看了下仓库,ant design 的文档是用 dumi 生成的,具体怎么实现暂时没找到
realJamespond
realJamespond
277 天前
@Charrlles 对,刚看了是自定义了 Link 实现的
epiloguess
epiloguess
277 天前
其实和 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
epiloguess
277 天前
除此以外,prefetch+动态导入,配合之下,基本可以完全消灭进度条...
Wxh16144
Wxh16144
277 天前
realJamespond
realJamespond
277 天前
@Wxh16144 最好是用 useTransition 这个特性实现
Wxh16144
Wxh16144
277 天前
@realJamespond 我对 react 这些 api 不是很熟悉,如果你可以去提交 PR 的话就好了,我还能顺便学习一下

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1039215

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX