在tabs的列表页:通过获取history的location的params的值,来确定要切换到哪个tab下。(默认是第一个tab的key)
import { createHashHistory } from 'history';
const history = createHashHistory();
// 获取params参数
const key = React.useMemo(() => history?.location?.params?.key, []);
const [activeKey, setActiveKey] = useState(key || '1');
// 改变tabs回调函数
const handleTabs = (value) => {
setActiveKey(value);
};
<Tabs defaultActiveKey="1" size="large" onChange={handleTabs} activeKey={activeKey}>
<Tabs.TabPane tab="tab1" key="1">
<Content1 site={site} activeKey={activeKey} />
</Tabs.TabPane>
<Tabs.TabPane tab="tab2" key="2">
<Content2 site={site} activeKey={activeKey} />
</Tabs.TabPane>
</Tabs>
以tab2的Content1为例:在不同的tab下,每进行一次操作就保存下对应tab的key。这里使用是params传参。
// 该方法是对应操作的跳转逻辑( 查看,编辑)
const goToConfigPage = (type, params = {}, draf = null) => {
const {
configId: id,
} = params;
history.push(`/config?type=${type}&site=${site}&id=${id}&draf=${draf}&key=${activeKey}`);
};
当上线/下线或者创建接口成功后,也要保存下key值。˙这里以编辑为例~
const res = await requestConfig(configParams);
if (res?.success) {
message.success('编辑成功');
history.push({
pathname: '/config',
params: {
site: siteId,
key
}
});
} else {
message.error('编辑失败');
}
};
详情页:获取history的location的params的值,并用query-string截取参数。
import { createHashHistory } from 'history';
const history = createHashHistory();
const {
id: configId,
site: siteId,
type: configType,
draf: drafFlag,
key
} = useMemo(() => qs.parse(history?.location.search), []);
// 操作接口调用成功后,保存下对应tab的key值。
history.push({
pathname: '/config',
params: {
site: siteId,
key
}
});