Reactjs Bootstrap 选项卡在页面重新加载后处于活动状态。或者如何在页面重新加载时使用 react 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>

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

Reactjs Bootstrap tab active after page reload. Or how can I save active tabs using react redux on state when page reloading

react-bootstrap