From 8431f5073219605446b975a224e7c663cae62156 Mon Sep 17 00:00:00 2001 From: YuJian920 Date: Sat, 7 May 2022 22:28:14 +0800 Subject: [PATCH] vault backup: 2022-05-07 22:28:14 --- 随时随地/管理后台中的 Tab 功能.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/随时随地/管理后台中的 Tab 功能.md b/随时随地/管理后台中的 Tab 功能.md index d32f3e9..28025a8 100644 --- a/随时随地/管理后台中的 Tab 功能.md +++ b/随时随地/管理后台中的 Tab 功能.md @@ -1,5 +1,6 @@ 最近在写基于 React 和 Antd 的后台管理系统，用作我的博客管理上，在参考其他开源项目的时候有一个功能我很感兴趣，就是在管理后台中加入一个像浏览器 Tabs 标签页的功能，让它实现切换标签页的功能，虽然现在的管理系统的页面总数不多其实没有什么快速切换的需求 = = -刚看到这个问题的时候，我的第一反应是有没有一个 API 可以记录并获取路由栈中的所有路由，再把他们给渲染出来，就能实现标签页的显示问题了，但是我找了一下好像没有这样的 API，所有后面会用 Context + useEffect 手写记录路由的方式来实现标签页的显示，要是有谁知道有这样一个API可以告诉我哇 + +刚看到这个问题的时候，我的第一反应是有没有一个 API 可以记录并获取路由栈中的所有路由，再将其给渲染出来，就解决了标签页的显示问题，但是我找了一下似乎并没有这样的 API，所以这篇文章会用 Context + useEffect 监听路由的方式来实现标签页的显示。 ## 大致的思路 外层用 Context 包裹，在 Context 内部用 useEffect 监听路由是否发生变化，也就是 pathname，如果发生了变化就记录路由的属性，因为要实现显示Tab名称、Tab 跳转和保存路由的查询参数，所以记录的时候这些信息要一起保存起来。