如何修复页面刷新后Ant Design Tabs标签页自动切换的问题

问题根因 #

1. 受控/非受控属性混用：你用useState维护了激活key的状态，但给Tabs组件传的是仅初始化生效的defaultActiveKey，状态更新后Tabs不会响应变更；页面刷新后state重置，进一步导致激活态混乱。
2. 类型不匹配：state初始值是字符串"1"，但所有TabPane的key是数字类型1/2/3...，AntD Tabs做激活匹配时用全等判断，类型不一致会导致匹配失败，出现自动跳转的异常。
3. 无持久化存储：页面刷新后React状态会重置，你没有把当前激活的标签key存入持久化空间，刷新后会回到初始默认值。

修复方案 #

按以下步骤修改代码即可解决：

1. 将Tabs的defaultActiveKey替换为受控属性activeKey，绑定你维护的state变量
2. 统一激活key和所有TabPane key的类型，统一使用字符串避免匹配错误
3. 切换标签时将激活key存入localStorage，组件初始化时优先从localStorage读取激活值，取不到再用默认值

修正后完整代码 #

// 初始化优先从localStorage取激活key，没有就用默认值"1"
const [key, setKey] = useState(() => localStorage.getItem('activeTab') || "1");
const callback = (k) => {
    setKey(k);
    // 切换时存储到localStorage持久化
    localStorage.setItem('activeTab', k);
}

const { projectId } = useParams();

return (
    <MainLayout
        component={
            <div className="flex-container">
                {/* 替换defaultActiveKey为受控的activeKey */}
                <Tabs activeKey={key} onChange={callback} className="flex-child" transition={false}>
                    {/* 所有TabPane的key统一为字符串类型，和state类型对齐 */}
                    <TabPane tab="Project Overview" key="1">
                        <SingleProject {...props} />
                    </TabPane>
                  
                    <TabPane tab="Models" key="2">
                        <div>
                            <a href="#">
                            <Model {...props}/>
                            </a>
                        </div>
                    </TabPane>
                    <TabPane tab="360 Tour" key="3">
                        <div>
                        <Assests {...props}/>
                        </div>
                    </TabPane>
                    <TabPane tab="Documents" key="4">
                        <div>
                            
                            <Document {...props}/>
                        </div>
                    </TabPane>
                    <TabPane tab="M.I.R" key="5">
                        <div>
                            <Mir {...props} />
                        </div>
                    </TabPane>
                    {/* <TabPane tab="Vendors" key="6">
                        <div>
                            Vendors 
                        </div>
                    </TabPane> */}
                    <TabPane tab="Sub Contractors" key="7">
                        <GCDisplay />
                        
                    </TabPane>    
                </Tabs>
            </div>
        }
       
    />

如果你需要支持分享链接时直接打开对应标签页，可以把激活key存入URL查询参数代替localStorage，效果是一致的。

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