时间戳

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

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

问题描述

我们在我们的 reactjs 应用程序中使用 bootstrap 4.5.2 for css。无论如何我们可以在浏览器刷新后保留选项卡选择如果它在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>

谢谢

标签： reactjstabs

解决方案

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

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}

推荐阅读