Description
首次加载画面都正常 然后切换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 (
<>
{/* 使用TabLayout来管理页面 */}
<div style={{ height: 54, paddingTop: 15 }}>
</>
);
};
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 string) => {
setActiveKey(key);
navigate(key);
};
const 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
>
activeKey={activeKey}
size="large"
tabBarStyle={{ padding: '0 20px' }}
type="editable-card"
as any}
>
{panes.map((pane: any) => (
{pane.key === activeKey && (
<KeepAlive when={[false, true]} id={pane.key} cacheKey={pane.key}>
{children}
)}
))}
)}
</>
);
};
export default TabLayout;