页面重载后保持Reactjs Bootstrap Tabs激活 如何用React Redux存储Tab状态

问题根因 #

你当前使用的defaultActiveKey仅用于组件首次渲染的默认激活值，属于非受控组件模式，Tab状态完全由组件内部维护，页面刷新后组件重置，状态自然丢失。要实现刷新后保持状态，需要将Tabs改为受控模式，将激活状态交由Redux管理，同时对Redux状态做持久化存储，避免刷新后Redux内存数据清空。

实现步骤 #

1. 配置Redux状态及持久化

首先创建Tab状态对应的Redux切片，同时通过redux-persist将状态持久化到localStorage，避免刷新丢失：

// store/slices/tabSlice.js
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  // 初始默认值和原有defaultActiveKey保持一致
  activeTabKey: 'profile'
}

const tabSlice = createSlice({
  name: 'tab',
  initialState,
  reducers: {
    setActiveTabKey: (state, action) => {
      state.activeTabKey = action.payload
    }
  }
})

export const { setActiveTabKey } = tabSlice.actions
export default tabSlice.reducer

配置Redux Store集成持久化能力：

// store/index.js
import { configureStore } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // 默认调用浏览器localStorage
import tabReducer from './slices/tabSlice'

const persistConfig = {
  key: 'tabState',
  storage,
  whitelist: ['activeTabKey'] // 仅持久化激活Tab的key，减少不必要存储
}

const persistedTabReducer = persistReducer(persistConfig, tabReducer)

export const store = configureStore({
  reducer: {
    tab: persistedTabReducer
  },
  // 关闭序列化检查避免redux-persist报错
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: false
  })
})

export const persistor = persistStore(store)

在项目入口文件包裹Provider和持久化网关：

// index.js 项目入口
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { store, persistor } from './store'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    {/* 持久化加载完成后再渲染应用，避免初始状态读取错误 */}
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
)

2. 改造Tabs为受控模式

将原有的非受控Tabs的defaultActiveKey替换为受控属性activeKey，同时绑定onSelect事件同步切换状态到Redux：

import { Tabs, Tab } from 'react-bootstrap'
import { useSelector, useDispatch } from 'react-redux'
import { setActiveTabKey } from './store/slices/tabSlice'
import Sonnet from './Sonnet' // 替换为你自己的业务组件

function TabComponent() {
  const dispatch = useDispatch()
  // 从Redux读取当前激活的Tab key
  const activeTabKey = useSelector(state => state.tab.activeTabKey)

  // Tab切换时更新Redux状态，会自动同步到localStorage
  const handleTabChange = (key) => {
    dispatch(setActiveTabKey(key))
  }

  return (
    <Tabs 
      activeKey={activeTabKey}
      onSelect={handleTabChange}
      id="controlled-tab-example" 
      className="mb-3"
    >
      <Tab eventKey="home" title="首页">
        <Sonnet />
      </Tab>
      <Tab eventKey="profile" title="个人资料">
        <Sonnet />
      </Tab>
      <Tab eventKey="contact" title="联系我们" disabled>
        <Sonnet />
      </Tab>
    </Tabs>
  )
}

export default TabComponent

注意事项 #

• 如果项目存在多个不同的Tabs组件，可在Redux中按页面路径或Tabs唯一ID分组存储激活key，避免不同Tabs状态冲突
• 若不想引入redux-persist，也可以在handleTabChange中手动将key存入localStorage，在组件初始化时读取localStorage的值更新到Redux即可

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