From ba06615d2b79e157976a24093987d40cae98ec48 Mon Sep 17 00:00:00 2001 From: YuJian Date: Sat, 7 May 2022 11:26:48 +0800 Subject: [PATCH] vault backup: 2022-05-07 11:26:48 --- 随时随地/管理后台中的 Tab 功能.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/随时随地/管理后台中的 Tab 功能.md b/随时随地/管理后台中的 Tab 功能.md index 555a98f..62d1d33 100644 --- a/随时随地/管理后台中的 Tab 功能.md +++ b/随时随地/管理后台中的 Tab 功能.md @@ -2,21 +2,24 @@ 刚看到这个问题的时候，我的第一反应是有没有一个 API 可以记录并获取路由栈中的所有路由，再把他们给渲染出来，就能实现标签页的显示问题了，但是我找了一下好像没有这样的 API，所有后面会用 Context + useEffect 手写记录路由的方式来实现标签页的显示，要是有谁知道有这样一个API可以告诉我哇 ## 大致的思路 -外层用 Context 包裹，在 Context 内部用 useEffect 监听路由是否发生变化，也就是 pathname，如果发生了变化就记录路由的属性，因为要实现显示Tab名称、Tab 跳转和保存路由的查询参数，所以记录的时候这些信息要一起保存起来 -其实这个功能是可以不用 Context 实现的，在Tabs 组件内部使用 useEffect 也能实现xian't但是我考虑到后来 +外层用 Context 包裹，在 Context 内部用 useEffect 监听路由是否发生变化，也就是 pathname，如果发生了变化就记录路由的属性，因为要实现显示Tab名称、Tab 跳转和保存路由的查询参数，所以记录的时候这些信息要一起保存起来。 +其实这个功能是可以不用 Context 实现，在 Tabs 组件内部使用 useEffect 也能实现相同的功能，但是我考虑到后边管理后台中或许会有别的页面也会需要用到类似的功能，就把它抽离出来方便复用。 ## Tabs 添加路由 有思路之后实现起来就很容易了，首先要实现一个 Context ，这个很简单直接跳过，然后实现一个路由的监听记录函数，这里用 useEffect 来做 ```javascript +// react-router 的 useLocation Hook const { pathname, search } = useLocation(); // useEffect 监听路由是否发生变化 useEffect(() => addTabItem(pathname, search), [pathname, search]); +// 记录路由的 State const [tabList, setTabList] = useState( [{ name: "Dashboard", path: "/", search: "" }] ); +// 路由添加函数 const addTabItem = (path, search) => { if (tabList.findIndex((item) => item.path === path) === -1) { const flattenList = flattenArray(routerConfig);