React 实现 F5 刷新后 Tabs 激活状态不重置

在 React 项目中，F5 刷新页面会导致组件重新初始化，Tabs 等状态通常会丢失并回到默认值。本文以 Ant Design Segmented（分段控制器，类似 Tabs）为例，分享如何用几行代码实现刷新后保持激活状态，核心逻辑可复用于 Tabs、Radio 等组件。

核心思路：借助 localStorage 持久化状态

页面刷新时，React 组件的 useState 会重新执行并回到初始值。要避免这种情况，只需将 “激活状态” 存储在 localStorage（浏览器本地存储，刷新 / 关闭页面后数据不丢失）中，组件初始化时优先读取本地存储的值，而非直接用默认值。

具体实现步骤（对应示例代码）

以示例中 “招聘需求 / 职位管理 / 候选人” 的 Segmented 为例，关键代码仅 3 步：

1. 初始化状态：优先读取 localStorage

组件初始化时，useState 的初始值不再写死，而是先从 localStorage 中读取 contractBoardActiveTab（自定义的键名，需唯一），若没有则用默认值 "1"：

const [activeTab, setActiveTab] = useState(
  localStorage.getItem('contractBoardActiveTab') || "1" // 先读本地存储，再用默认值
);

2. 更新状态：同步写入 localStorage

当用户切换 Segmented（点击不同选项）时，在 setActiveTab 更新组件状态的同时，将新状态写入 localStorage，确保下次刷新能读取到最新值：

<Segmented
  value={activeTab}
  onChange={(tab) => {
    setActiveTab(tab); // 更新组件状态
    localStorage.setItem('contractBoardActiveTab', tab); // 同步写入本地存储
  }}
/>

3. 存在子组件联动时同步状态

存在子组件触发 Tab 切换，需在子组件调用的方法中，同步更新 localStorage，保证状态一致性：

const checkoutTab = (tab, info) => {
  setActiveTab(tab);
  clickInfo.current = info;
  localStorage.setItem('contractBoardActiveTab', tab); // 子组件切换时也同步存储
};

原理总结

整个逻辑本质是 “状态持久化”：将易丢失的 “组件内存状态”（useState）与 “浏览器持久化存储”（localStorage）绑定，刷新前把最新状态存到本地，刷新后从本地读状态初始化组件，从而实现 “刷新不重置” 的效果。

该方案轻量无依赖，除了 Segmented，还可直接复用于 Ant Design Tabs、Radio 等需要保持状态的组件，只需替换 “存储键名” 和 “状态变量” 即可。