Reactjs Bootstrap选项卡在页面重新加载后处于活动状态。或者，当页面重新加载时，如何使用redux on state保存活动选项卡

Question

如何在页面重新加载时保存当前活动的选项卡？

<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" className="mb-3">
  <Tab eventKey="home" title="Home">
    <Sonnet />
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <Sonnet />
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    <Sonnet />
  </Tab>
</Tabs>

Answer 1

在这里我得到了选项卡激活的解决方案，即使在重新加载页面之后也是如此

const [key, setKey] = useState("Home");

useEffect(() => {
const getActiveTab = JSON.parse(localStorage.getItem("activeTab"));
 if (getActiveTab) {
 setKey(getActiveTab);
 }
}, []);

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

<Tabs
id="controlled-tab-example"
activeKey={key}
onSelect={(k) => setKey(k)}
className="mb-3"
>
<Tab eventKey="home" title="Home">
 <h3>Home</h3>
</Tab>
<Tab eventKey="profile" title="Profile">
 <h3>Profile</h3>    
</Tab>
<Tab eventKey="contact" title="Contact">
  <h3>Contact</h3> 
</Tab>
</Tabs>