{"id":19071785,"url":"https://github.com/yunsii/use-switch-tabs","last_synced_at":"2025-08-08T15:38:35.752Z","repository":{"id":38778065,"uuid":"369249428","full_name":"yunsii/use-switch-tabs","owner":"yunsii","description":"🚀  React hook used to convert Switch-like component to Tabs-like component state. 用于将类 Switch 组件转换为 Tabs 组件状态的 React hook。","archived":false,"fork":false,"pushed_at":"2022-06-23T12:11:28.000Z","size":1341,"stargazers_count":46,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-22T17:45:45.636Z","etag":null,"topics":["react","react-hook","switch","tabs","umi","vite"],"latest_commit_sha":null,"homepage":"https://yunsii.github.io/use-switch-tabs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yunsii.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-20T15:09:52.000Z","updated_at":"2025-06-04T07:20:38.000Z","dependencies_parsed_at":"2022-07-30T07:38:13.374Z","dependency_job_id":null,"html_url":"https://github.com/yunsii/use-switch-tabs","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/yunsii/use-switch-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Fuse-switch-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Fuse-switch-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Fuse-switch-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Fuse-switch-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunsii","download_url":"https://codeload.github.com/yunsii/use-switch-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Fuse-switch-tabs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264604938,"owners_count":23635968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-hook","switch","tabs","umi","vite"],"created_at":"2024-11-09T01:30:59.293Z","updated_at":"2025-07-10T16:08:07.920Z","avatar_url":"https://github.com/yunsii.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 use-switch-tabs\n\n[![use-switch-tabs](https://nodei.co/npm/use-switch-tabs.png)](https://npmjs.org/package/use-switch-tabs)\n\nReact hook used to convert Switch-like component to Tabs-like component state. 用于将类 Switch 组件转换为 Tabs 组件状态的 React hook。\n\n- 支持页面的嵌套路由渲染\n- 两种标签页模式可选\n  - 基于路由，每个路由只渲染一个标签页\n  - 基于路由参数，计算出每个路由的所有参数的哈希值，不同的哈希值渲染不同的标签页\n- 快捷操作\n  - 刷新标签页 - `actionRef.reloadTab()`\n  - 关闭标签页 - `actionRef.closeTab()`\n  - 返回之前标签页 - `actionRef.goBackTab()`\n  - 关闭并返回之前标签页 - `actionRef.closeAndGoBackTab()`\n  - 获取 location 对应的 tabKey，如果没有入参，返回当前激活的 tabKey - `actionRef.getTabKey()`\n  - 监听 activeKey 变化事件 - `actionRef.listenActiveChange()`\n- `follow`，路由定义中新增配置，默认打开方式是添加到所有标签页最后面，可通过配置该属性，使得一个标签页在 `follow` 指定的标签页后面打开\n- `persistent`，支持页面刷新之后恢复上次的标签页状态\n\n注：返回默认只会返回上次的路由，所以如果上次的路由没有关闭，会在两个路由之前反复横跳，当删除上次打开的标签页之后再调用该返回方法时只会打印警告。\n\n## 如何使用？\n\n- 基于 useSwitchTabs 封装 [SwitchTabs](./example/src/components/SwitchTabs/index.tsx#L35) 组件\n- 在 Layout 层[使用 SwitchTabs 组件](./example/src/layouts/BasicLayout.tsx#L88)\n\n\u003e 细节可参考 example 中的用法，也可参考 [ant-design-pro-plus](https://github.com/yunsii/ant-design-pro-plus/blob/master/src/layouts/BasicLayout.tsx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunsii%2Fuse-switch-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunsii%2Fuse-switch-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunsii%2Fuse-switch-tabs/lists"}