React-Router导航菜单激活状态重置及页面重载问题求助

问题根源 #

你的代码使用普通href属性触发整页重载，导致应用状态重置，同时出现白屏；另外defaultActiveKey仅设置初始激活状态，无法随路由变化自动更新。

修复方案 #

改用React Router客户端导航，通过当前路由动态控制激活状态：

import { Nav } from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom';

function TabsExample() {
  // 获取当前路由路径
  const location = useLocation();

  return (
    <Nav variant="pills" activeKey={location.pathname}>
      <Nav.Item>
        {/* 用as={Link}渲染React Router的Link组件，实现客户端导航 */}
        <Nav.Link as={Link} to="/home" eventKey="/home">Home</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        {/* 确保eventKey与路由路径一致，匹配activeKey */}
        <Nav.Link as={Link} to="/option2" eventKey="/option2">Option 2</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="disabled" disabled>
          Disabled
        </Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

export default TabsExample;

关键改动说明 #

1. 客户端导航：用as={Link}和to属性替代href，让导航在客户端完成，避免整页重载，解决白屏问题。
2. 动态激活状态：通过useLocation获取当前路由路径，将Nav的activeKey设为该路径，确保激活状态随路由自动同步。
3. 匹配eventKey：可导航的Nav.Link的eventKey需对应其路由路径，保证activeKey能正确匹配并高亮对应链接。

为什么Jotai没起作用？ #

整页重载会重置所有内存中的状态（包括Jotai），导致状态存储无效。改用客户端导航后，应用不会重新加载，状态自然保持，且无需额外状态管理库——React Router已提供当前路由信息。

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