antd-tabs クリックして特定のタブの詳細を入力し、リストに戻り、現在のタブに戻ることを期待します

1. タブ リスト ページ: 履歴の場所のパラメータの値を取得して、どのタブに切り替えるかを決定します。(デフォルトは最初のタブのキーです)

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>

2. tab2 の Content1 を例に挙げます。別のタブでは、操作が実行されるたびに、そのタブに対応するキーが保存されます。ここでの使用は、params パラメータの受け渡しです。

// 该方法是对应操作的跳转逻辑（ 查看，编辑） 
 const goToConfigPage = (type, params = {}, draf = null) => {
    const {
      configId: id,
    } = params;

    history.push(`/config?type=${type}&site=${site}&id=${id}&draf=${draf}&key=${activeKey}`);
  };

オンライン/オフラインになった後、またはインターフェイスが正常に作成された後、キーの値も保存する必要があります。˙ここでは編集を例に挙げます〜

    const res = await requestConfig(configParams);
    if (res?.success) {
      message.success('编辑成功');
      history.push({
        pathname: '/config',
        params: {
          site: siteId,
          key
        }
      });
    } else {
      message.error('编辑失败');
    }
  };

3. 詳細ページ: 履歴の場所のパラメータの値を取得し、クエリ文字列を使用してパラメータをインターセプトします。

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