如何在Next.js中追踪激活链接，为Ant Design侧边栏添加激活样式

实现方案 #

步骤1：定义路由与菜单映射表

统一管理所有菜单项的路径、key、父级关联关系，后续新增菜单只需在该表中扩展即可：

const menuConfig = [
  {
    path: '/',
    key: '1',
    parentKey: null
  },
  {
    path: '/settings/profile',
    key: '2.1',
    parentKey: '2'
  }
  // 后续新增菜单直接在这里补充配置
]

步骤2：监听路由自动匹配激活项

在侧边栏组件中监听路由变化，自动计算当前激活的菜单key以及对应的父级key，避免刷新页面后激活状态丢失：

// 如果使用react-router，替换为对应的useLocation钩子获取pathname即可
import { useRouter } from 'next/router' 

// 组件内部逻辑
const router = useRouter()
const [activeKey, setActiveKey] = useState('')
const [parentActiveKey, setParentActiveKey] = useState('')

useEffect(() => {
  // 匹配当前路由对应的菜单配置
  const currentMenu = menuConfig.find(item => item.path === router.pathname)
  if (currentMenu) {
    setActiveKey(currentMenu.key)
    setParentActiveKey(currentMenu.parentKey)
    // 如果需要同步给上层的selectedKey，直接调用上层传入的更新方法即可
  }
}, [router.pathname])

步骤3：修改菜单激活样式判断逻辑

调整SubMenu和Menu.Item的className判断条件，满足子项激活时父级也能命中激活类：

<Sider
  width={260}
  className={styles.sider}
  collapsible
  trigger={null}
  collapsed={drawer}
  breakpoint="md"
  collapsedWidth={0}
>
  <Menu 
    mode="inline"
    // 如需激活子项时自动展开父级菜单，加上以下openKeys配置
    openKeys={parentActiveKey ? [parentActiveKey] : []}
  >
    <Menu.Item
      icon={<IoGrid />}
      key="1"
      onClick={(e) => {
        toggleKey(e);
        gotoPage("/");
      }}
      className={activeKey === '1' ? styles.active_item : ""}
    >
      Dashboard
    </Menu.Item>
    <SubMenu
      title="Settings"
      key="2"
      icon={<IoSettingsOutline />}
      {/* 父级判断条件：自身是激活key 或者 当前激活项的父级是自身key */}
      className={activeKey === '2' || parentActiveKey === '2' ? styles.active_item : ""}
    >
      <Menu.Item
        icon={<IoPersonAddOutline />}
        key="2.1"
        onClick={(e) => {
          toggleKey(e);
          gotoPage("/settings/profile");
        }}
        className={activeKey === '2.1' ? styles.active_item : ""}
      >
        Profile
      </Menu.Item>
    </SubMenu>
  </Menu>
</Sider>

补充说明

如果需要把激活状态放到上层组件维护，只需把activeKey和parentActiveKey的状态以及路由监听逻辑提升到上层组件即可，原有逻辑无需修改。

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