官方说明请参阅 /master/README.zh-CN
兼容性:^[email protected] | ^[email protected]
- 支持页面的嵌套路由渲染
- 两种标签页模式可选
- 基于路由,每个路由只渲染一个标签页
- 基于路由参数,计算出每个路由的所有参数的哈希值,不同的哈希值渲染不同的标签页
- 可固定标签栏
- 快捷操作
- 刷新标签页 -
window.tabsAction.reloadTab()
- 关闭标签页 -
window.tabsAction.closeTab()
- 返回之前标签页 -
window.tabsAction.goBackTab()
- 关闭并返回之前标签页 -
window.tabsAction.closeAndGoBackTab()
- 获取 location 对应的 tabKey,如果没有入参,返回当前激活的 tabKey -
window.tabsAction.getTabKey()
- 监听 activeKey 变化事件 -
window.tabsAction.listenActiveChange()
- 刷新标签页 -
reloadable
,支持在头部操作栏刷新当前标签页follow
,路由定义中新增配置,默认打开方式是添加到所有标签页最后面,可通过配置该属性,使得一个标签页在follow
指定的标签页后面打开(可参考查询页 Demo)persistent
,支持页面刷新之后恢复上次的标签页状态
注意:
- 返回默认只会返回上次的路由,所以如果上次的路由没有关闭,会在两个路由之前反复横跳,当删除上次打开的标签页之后再调用该返回方法时只会打印警告
- 如需固定标签页头部且渲染 Footer 时,请使用 SwitchTabsLayout 的 footerRender 配置,而不是 ProLayout 提供的 footerRender,以保证组件能正常固定标签页头部
├── config
│ └── defaultSettings.ts # 系统风格配置,新增关于 SwitchTabs 的配置
├── src
│ └── layouts
│ └── SwitchTabsLayout # 路由加载
│ └── pages
│ └── SwitchTabsDemo # 标签页功能展示
🎉🎉🎉
已发包 use-switch-tabs,同时通过 use-switch-tabs 进行了重构。 —— 2021.06.19
基于 ant design pro
V4 版本的功能分支。
原仓库名称 ant design pro v2 plus
,代码移到此分支。重命名为 ant design pro plus
后,在 master
分支跟进 ant design pro
中的更新。
基于 umi@2.x 的功能实现。
Pro V5 在架构上有了较大的重构,通过 Umi 的插件机制屏蔽了更多的实现细节。不过得益于此前已将标签页核心功能发包 use-switch-tabs,故需要做得工作并不多。但是值得注意的一点是需要 @umijs/plugin-layout
的版本不能低于 0.18.0
,详见此讨论,因此 @umijs/preset-react
版本不能低于 1.8.28
,详见此更新。
最后,实现入口改到了 app.ts,通过此入口可查看具体实现,相关 UI 组件较于 V4 基本没有改动。
补充说明:由于 V5 开始使用了扁平化的路由,以及当前 use-switch-tabs
做了 redirect 的适配,所以在使用页面标签化的功能的时候注意 originalRoutes
需要处理得当,避免 isSwitchTab
判断异常。
相关讨论和分析参考 umijs/umi#4425,最终分析得出了导致暂时无法升级的根本原因,PR umijs/umi#6101 修复了该问题,但需要使用 umi@3.3.8 以上版本。
可使用 withSwitchTab
函数包装页面组件,避免页面反复渲染。值得注意的是,如果在页面中使用了一些特殊的状态,如 useLocation
这样的 hook,会导致无法优化。如果一定要用的话,可自行使用 useMemo
优化。
在切换的时候标签会出现闪烁的情况 #5,刚开始还没在意,后来发现了原因,参考 ant-design/ant-design#25343。
由于是部署到 Github Pages,配置了 exportStatic
,故无法使用形如 /result/:id
的动态路由。又通过 isProductionEnv
变量避免登录逻辑等问题,如果有接口报错可忽略,重点是功能实现 _(:з」∠)_