如何在引导程序 4.5.2 中重新加载页面时保留当前活动选项卡答案

【问题标题】：how to retain current active tab on page reload in bootstrap 4.5.2如何在引导程序 4.5.2 中重新加载页面时保留当前活动选项卡
【发布时间】：2021-01-14 04:10:31
【问题描述】：

我们在我们的 reactjs 应用程序中使用了 CSS 的 bootstrap 4.5.2。无论如何我们可以在浏览器刷新后保留选项卡选择如果它在 account2 中，则在浏览器刷新后它仍然会转到 account1。我们没有使用 react-bootstrap 库，我们使用的是使用 npm 安装的 bootstrap css 库。

 <div className="nav nav-tabs" id="accountTab" role="tablist">
                 <a className="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true" onClick={() => handleTabClick('account1')}   >account1 &nbsp;<span className="badge badge-pill badge-dark">{dataCount && dataCount.account1}</span></a> 
                <a className="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false" onClick={() => handleTabClick('account2')}   >account2 &nbsp;<span className="badge badge-pill badge-dark">{dataCount && dataCount.account2}</span>   </a>
                <a className="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false" onClick={() => handleTabClick('account3')}   >account3 &nbsp;<span className="badge badge-pill badge-dark">{dataCount && dataCount.account3}</span>   </a>
                <a className="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false" onClick={() => handleTabClick('account4')}   >Others &nbsp;<span className="badge badge-pill badge-dark">{0}</span>   </a>
            </div>

谢谢

【问题讨论】：

标签： reactjs tabs

【解决方案1】：

如果我尝试了以下修复并且它对我有效且没有任何问题，任何人有更好的建议请告诉我

var activeTabCss = "nav-item nav-link active";
var tabCss = "nav-item nav-link";

const account = useSelector(state=>state.shipment.courier);

handleTabClick('account1')} >account1 {dataCount && dataCount.account1} handleTabClick('account2')} >account2 {dataCount && dataCount.account2} handleTabClick('account3')} >account3 {dataCount && dataCount.account3} handleTabClick('account4')} >其他{0}

【讨论】：