首次加载画面都正常 然后切换tab加载缓存画面,出现两个页面显示一样, 尤其是第一个和第二tab标签

[kkyang63]

trafficstars

首次加载画面都正常 然后切换tab加载缓存画面,出现两个页面显示一样, 尤其是第一个和第二tab标签

import { AliveScope } from 'react-activation'; import { Outlet } from 'react-router-dom'; import TabLayout from './TabLayout'; // 导入你创建的TabLayout组件 import { useLocation } from 'react-router-dom';

interface Iprops { dispatch: any; } const BasicLayout = (props: Iprops) => { const location = useLocation(); return ( <> <AliveScope > {/* 使用TabLayout来管理页面 */} <div style={{ height: 54, paddingTop: 15 }}> <TabLayout>

<Outlet />

</TabLayout> </AliveScope> </> ); };

export default BasicLayout;

import { Tabs } from 'antd'; import React, { useEffect, useMemo, useState } from 'react'; import KeepAlive, { AliveScope, useAliveController } from 'react-activation'; import { useLocation, useNavigate } from 'react-router-dom'; import routes from './../../config/routes';

const { TabPane } = Tabs;

const TabLayout: React.FC = ({ children }: any) => { const navigate = useNavigate(); const location = useLocation(); const [activeKey, setActiveKey] = useState(location.pathname); const [panes, setPanes] = useState([]);

const { getCachingNodes, clear, drop } = useAliveController();

const findTitleByPath = useMemo(() => { const findTitle = (path: string, routes: any[]): string => { for (const route of routes) { if (route.path === path) { return route.name; } if (route.routes) { const title = findTitle(path, route.routes); if (title !== '未命名页面') return title; } } return '未命名页面'; }; return findTitle; }, [routes]);

useEffect(() => { const currentPath = location.pathname; if (currentPath === '/') { clear() navigate('/comprehensive/view'); // 设置默认重定向 // setActiveKey('/comprehensive/view'); } else { const existingPane = panes.find((pane: any) => pane.key === currentPath); console.log(panes); if (!existingPane) { setPanes((prevPanes: any) => { setActiveKey(currentPath); return [ ...prevPanes, { title: findTitleByPath(currentPath, routes), key: currentPath }, ] }); } console.log(currentPath, 'currentPath')

}
const cachedNodes = getCachingNodes();
console.log(cachedNodes, 'cachedNodes')

}, [location.pathname, findTitleByPath, navigate, panes]);

const onChange = (key: string) => { setActiveKey(key); navigate(key); };

const onEdit = (targetKey: string, action: string) => { if (action === 'remove') { remove(targetKey); } };

const remove = (targetKey: string) => { console.log(targetKey) let newActiveKey = activeKey; let lastIndex = -1; panes.forEach((pane: any, i: number) => { if (pane.key === targetKey) { lastIndex = i - 1; } }); const newPanes = panes.filter((pane: any) => pane.key !== targetKey); if (newPanes.length && newActiveKey === targetKey) { if (lastIndex >= 0) { newActiveKey = newPanes[lastIndex].key; } else { newActiveKey = newPanes[0].key; } } drop(targetKey); setPanes(newPanes); setActiveKey(newActiveKey); navigate(newActiveKey);

};

return ( <> {panes.length > 0 && ( <Tabs hideAdd onChange={onChange} activeKey={activeKey} size="large" tabBarStyle={{ padding: '0 20px' }} type="editable-card" onEdit={onEdit as any} > {panes.map((pane: any) => ( <TabPane tab={pane.title} key={pane.key}> {pane.key === activeKey && ( <KeepAlive when={[false, true]} id={pane.key} cacheKey={pane.key}>

{children}

</KeepAlive> )} </TabPane> ))} </Tabs> )} </> ); };

export default TabLayout;