diff --git a/随时随地/管理后台中的 Tab 功能.md b/随时随地/管理后台中的 Tab 功能.md index e777e67..555a98f 100644 --- a/随时随地/管理后台中的 Tab 功能.md +++ b/随时随地/管理后台中的 Tab 功能.md @@ -1,15 +1,24 @@ 最近在写基于 React 和 Antd 的后台管理系统,用作我的博客管理上,在参考其他开源项目的时候有一个功能我很感兴趣,就是在管理后台中加入一个像浏览器 Tabs 标签页的功能,让它实现切换标签页的功能,虽然现在的管理系统的页面总数不多其实没有什么快速切换的需求 = = -刚看到这个问题的时候,我的第一反应是有没有一个 API 可以记录并获取路由栈中的所有路由,再把他们给渲染出来,就能实现标签页的显示问题了,但是我找了一下好像没有这样的 API,所有后面会用手写记录路由的方式来实现标签页的显示,要是有谁知道有这样一个API可以告诉我哇 +刚看到这个问题的时候,我的第一反应是有没有一个 API 可以记录并获取路由栈中的所有路由,再把他们给渲染出来,就能实现标签页的显示问题了,但是我找了一下好像没有这样的 API,所有后面会用 Context + useEffect 手写记录路由的方式来实现标签页的显示,要是有谁知道有这样一个API可以告诉我哇 ## 大致的思路 外层用 Context 包裹,在 Context 内部用 useEffect 监听路由是否发生变化,也就是 pathname,如果发生了变化就记录路由的属性,因为要实现显示Tab名称、Tab 跳转和保存路由的查询参数,所以记录的时候这些信息要一起保存起来 +其实这个功能是可以不用 Context 实现的,在Tabs 组件内部使用 useEffect 也能实现xian't但是我考虑到后来 ## Tabs 添加路由 有思路之后实现起来就很容易了,首先要实现一个 Context ,这个很简单直接跳过,然后实现一个路由的监听记录函数,这里用 useEffect 来做 ```javascript -const addTabItem = (path: TabList["path"], search: TabList["search"]) => { - if (findTabUtils(path) === -1) { +const { pathname, search } = useLocation(); +// useEffect 监听路由是否发生变化 +useEffect(() => addTabItem(pathname, search), [pathname, search]); + +const [tabList, setTabList] = useState( + [{ name: "Dashboard", path: "/", search: "" }] +); + +const addTabItem = (path, search) => { + if (tabList.findIndex((item) => item.path === path) === -1) { const flattenList = flattenArray(routerConfig); const routerIndex = flattenList.findIndex((item) => { item.path === path @@ -22,7 +31,7 @@ const addTabItem = (path: TabList["path"], search: TabList["search"]) => { } } - // 这个是点击 Tab 切换路由的函数,后面会写到 + // 这个是切换路由的函数,后面会写到 switchTab(path, search); }; ``` \ No newline at end of file