antd-tabs点击进入某个tab下的详情，返回列表预期回到当前tab

最新推荐文章于 2023-07-25 13:52:52 发布

一枚程序鱼

最新推荐文章于 2023-07-25 13:52:52 发布

阅读量846

点赞数

文章标签： react.js Powered by 金山文档

本文链接：https://blog.csdn.net/congxue666/article/details/128792239

版权

在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
    }
  });