Активные вкладки HeadlessUI Tabs возвращаются к 0 после обновления

Question

Мне очень нужна помощь по вкладкам безголового интерфейса пользователя. Я пытался исправить это самостоятельно и исследовал, но не хватало ресурсов по моей проблеме. Я до сих пор не понимаю, как это не работает, я тоже читал документы.

      import { useEffect, useState } from "react";
import { Tab } from "@headlessui/react";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

export default function Tabs({ tabs }) {
  const [index, setIndex] = useState();

  return (
    <Tab.Group
      defaultIndex={index}
      onChange={(index) => {
        console.log("Changed selected tab to:", index);
        setIndex(index);
      }}
    >
      <Tab.List className="text-xl space-x-9">
        {tabs.map(({ tab }, index) => (
          <Tab
            key={index}
            className={({ selected }) =>
              classNames(
                selected ? "text-gray-900" : "text-gray-400 font-avenir-roman"
              )
            }
          >
            {tab}
          </Tab>
        ))}
      </Tab.List>
      <Tab.Panels>
        {tabs.map(({ content }, index) => (
          <Tab.Panel key={index}>{content}</Tab.Panel>
        ))}
      </Tab.Panels>
    </Tab.Group>
  );
}

Answer 1

Это то, что я сделал, чтобы сохранить currentTab

      const [currentTab, setCurrentTab] = useState(0);

useEffect(() => {
    localStorage.setItem("currentTab", JSON.stringify(currentTab));
  }, [currentTab]);

  useEffect(() => {
    const currentTab = JSON.parse(localStorage.getItem("currentTab"));
    if (currentTab) {
      setCurrentTab(currentTab);
    }
  }, []);

 <Tab.Group
            defaultIndex={tab}
            onChange={(currentTab) => {
              setCurrentTab(currentTab);
              router.replace(
                {
                  pathname: `/path/userPath/edit/${id}`,
                  query: { tab: currentTab },
                },
                undefined,
                {
                  shallow: true,
                }
              );
            }}
          >

Answer 2

Нашел простой способ сделать это, используя параметр запроса URL. Прежде всего добавьте параметр запроса, используя onClick для каждого компонента вкладки.

{BASEURL}?tab={tab_name}

Затем создайте функцию, подобную следующей:

      const router = useRouter();

const getActiveTab = () => {
    const tabValues = ["tab1","tab2"]; //This should contains the all the tab_names you given earlier when calling onClick.

    return tabValues.indexOf(router.query.tab);
  };

После этого установите атрибут defaultIndex компонента Tab.Group равным возвращаемому значению функции следующим образом:

      <Tab.Group defaultIndex={getActiveTab()}>
  <Tab.List>
  </Tab.List>
<Tab.Group/>