如何在关联路径的标签页场景下使用history.goBack不退回上一个选中标签页

核心问题原因 #

你当前的问题根源是NavLink默认使用history.push()跳转，每次点击标签页都会向浏览器历史栈新增一条记录，所以多次切换标签后调用history.goBack()只会退回上一个标签页，无法直接回到弹窗打开前的页面。

最优解决方案 #

直接给NavLink添加replace属性即可，不需要额外统计标签点击次数，完全符合你「标签页跳转不新增历史栈」的需求：

function Tab(props) {
    return (
        <NavLink
            to={props.linkTo}
            replace // 仅需新增这一行配置
            activeClassName={styles["tab-active"]}
            style={{ textDecoration: "none" }}
        >
            <div role="button" className={styles["tab"]}>
                {props.children}
                <span>{props.name}</span>
            </div>
        </NavLink>
    );
}

实现原理 #

添加replace属性后，NavLink跳转时会调用history.replace()，直接替换当前历史栈的最新条目，不会新增记录。无论切换多少次设置标签页，历史栈中始终只有一条打开设置弹窗的记录，此时点击弹窗背景调用history.goBack()就会直接退回到弹窗打开前的页面。

该方案同时保留了query参数记录当前标签的特性，刷新页面后依然可以正常定位到当前选中的标签，比统计点击次数的方案稳定性高很多，不会因为用户刷新、误触浏览器前进后退按钮出现逻辑异常。

内容的提问来源于stack exchange，提问作者Bravish