React Bootstrap如何实现页面刷新后保持当前Tab激活状态

核心逻辑是把标签页从默认的非受控模式改成受控模式，搭配浏览器本地存储持久化激活的标签标识，刷新时直接读取存储值作为初始激活项即可。

具体修改点 #

• 移除原组件上的defaultActiveKey属性，该属性仅在组件首次挂载时生效，无法响应外部状态变更，也不会持久化用户的选择
• 用React状态绑定activeKey属性控制当前激活标签，状态初始值优先从localStorage读取，无历史选择记录时回退到默认标签first
• 绑定onSelect事件，用户切换标签时同步更新组件状态，同时将最新的激活标签key存入本地存储

修改后完整代码 #

import { useState } from 'react';
import { Tab, Row, Col, Nav } from 'react-bootstrap';
// 原有引入的Sonnet等组件保持不变

function TabsPage() {
  // 初始化时优先读取本地存储的激活标签key，无记录则默认选中first
  const [activeKey, setActiveKey] = useState(
    window.localStorage.getItem('currentActiveTab') || 'first'
  );

  const handleTabChange = (selectedKey) => {
    setActiveKey(selectedKey);
    // 切换标签时同步将选中状态写入本地存储
    window.localStorage.setItem('currentActiveTab', selectedKey);
  };

  return (
    <Tab.Container 
      id="left-tabs-example" 
      activeKey={activeKey}
      onSelect={handleTabChange}
    >
      <Row>
        <Col sm={3}>
          <Nav variant="pills" className="flex-column">
            <Nav.Item>
              <Nav.Link eventKey="first">Tab 1</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link eventKey="second">Tab 2</Nav.Link>
            </Nav.Item>
          </Nav>
        </Col>
        <Col sm={9}>
          <Tab.Content>
            <Tab.Pane eventKey="first">
              <Sonnet />
            </Tab.Pane>
            <Tab.Pane eventKey="second">
              <Sonnet />
            </Tab.Pane>
          </Tab.Content>
        </Col>
      </Row>
    </Tab.Container>
  )
}

可选适配说明 #

• 如果不需要在关闭浏览器后仍保留标签选择状态，可以把localStorage替换为sessionStorage，标签页关闭后存储内容会自动清空
• 如果项目使用了服务端渲染框架（如Next.js），读取本地存储初始化状态的逻辑需要放到useEffect中执行，避免服务端渲染阶段找不到window对象抛出报错
• 同域名下如果存在多个独立的标签页组件，给每个组件的存储key设置不同名称即可，避免不同标签页的激活状态互相覆盖

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