antd-tabs Haga clic para ingresar los detalles en una determinada pestaña, regrese a la lista y espere regresar a la pestaña actual

1. En la página de lista de pestañas: determine a qué pestaña cambiar obteniendo el valor de los parámetros de la ubicación del historial. (por defecto es la clave de la primera pestaña)

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. Tome Content1 de tab2 como ejemplo: en diferentes pestañas, la clave correspondiente a la pestaña se guarda cada vez que se realiza una operación. El uso aquí es el paso de parámetros params.

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

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

Después de conectarse/desconectarse o crear una interfaz con éxito, el valor clave también debe guardarse. ˙Aquí tomamos la edición como ejemplo~

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

3. Página de detalles: obtenga el valor de los parámetros de la ubicación del historial y use la cadena de consulta para interceptar los parámetros.

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