ProCard的tabs主页，从子页返回后怎么回到对应的tabs主页

项目使用antDesign pro ，在使用ProCard的tabs属性时，点击新建进入对应的新建页面，再返回后又会回到设置的默认tab页，怎么使返回后再回到对应的tab页而不是默认页呢？

解决方案是使用sessionStorage本地缓存！

代码如下：
 1.在公共方法文件中，定义以下方法

/** 文件目录路径：src/uilts/stroage.ts */

/** 获取缓存 */
export const getItem = (key: string) => {
  try {
    const data = sessionStorage.getItem(key);
    if (!data) {
      return null;
    }
    return JSON.parse(data);
  } catch (error) {
    const data = sessionStorage.getItem(key);
    if (!data) {
      return null;
    }
    return data;
  }
};

/** 设置缓存 */
export const setItem = (key: string, item: any) => {
  try {
    sessionStorage.setItem(key, JSON.stringify(item));
  } catch (error) {}
};

2.在ProCard的tabs主页里使用上面定义的方法：

import { PageContainer } from "@ant-design/pro-layout";
import React, { useState, useEffect, useRef } from "react";
import { ProCard, ProCardTabsProps } from "@ant-design/pro-components/";
import RentHousingTableList from "./rent_housing/index";
import SecondHousingTabList from "./second_housing/index";
import NewHouseTableList from "./new_housing/index";
import parseUrl from "@/common/urlQuery";
import "./index.css";
import { getItem, setItem } from "@/uilts/storage";
// tab切换栏
const TabCards = () => {
  const [tab, setTab] = useState("1");
  const [tabPosition, setTabPosition] =
    useState<ProCardTabsProps["tabPosition"]>("top");

  const tabs = parseUrl().tabs;

  useEffect(() => {
    setTab(getItem("tabKey")); //在这里获取
  }, [tabs]);

  return (
    <PageContainer
      header={{
        title: "",
      }}
    >
      <ProCard
        tabs={{
          type: "card",
          tabPosition,
          activeKey: tab,
          onChange: (key: any) => {
            setItem("tabKey", key); // 在onChange事件里设置缓存
            setTab(key);
          },
          items: [
            {
              label: `新房房源管理`,
              key: "1",
              children: <NewHouseTableList />,
            },
            {
              label: `二手房源管理`,
              key: "2",
              children: <SecondHousingTabList />,
            },
            {
              label: `租房房源管理`,
              key: "3",
              children: <RentHousingTableList />,
            },
          ],
        }}
      />
    </PageContainer>
  );
};

export default TabCards;

3.看一下本地缓存，缓存成功就可以啦

 

这样就解决啦