如何跟踪 next.js 中活跃的 link？

Question

我的管理面板中有一个侧边栏组件，它有多个 link。其中一些 link 位于下拉菜单中。现在我想添加一个基于活动 link 的活动 class，或者如果活动 link 在下拉菜单中，则添加到下拉切换。下面是我的侧边栏代码。顺便说一句，我正在为 ui.

使用 antd 框架

<Sider
      width={260}
      className={styles.sider}
      collapsible
      trigger={null}
      collapsed={drawer}
      breakpoint={"md"}
      collapsedWidth={0}
    >
      <Menu mode="inline">
        <Menu.Item
          icon={<IoGrid />}
          key="1"
          onClick={(e) => {
            toggleKey(e);
            gotoPage("/");
          }}
          className={selectedKey == 1 ? styles.active_item : ""}
        >
          Dashboard
        </Menu.Item>
        <SubMenu
          title="Settings"
          key="2"
          icon={<IoSettingsOutline />}
          className={selectedKey == 2 ? styles.active_item : ""}
        >
          <Menu.Item
            icon={<IoPersonAddOutline />}
            key="2.1"
            onClick={(e) => {
              toggleKey(e);
              gotoPage("/settings/profile");
            }}
          >
            Profile
          </Menu.Item>
        </SubMenu>
      </Menu>
    </Sider>

顺便说一句，selectedKey 和 toggleKey 函数来自顶级组件，而 gotoPage 只是 router.push 功能。
谢谢

Answer 1

按照这个你应该使用 useRouter 钩子来获取当前路径。

对于您的用例而不是相等性检查，您应该使用 startsWith 或其他一些检查。所以它看起来像这样

假设你有

Settings -> /settings
  Profile -> /settings/profile
  Notifications /settings/notifications

您检查当前路径是否开始 /settings 并假设设置组处于活动状态，您只需展开设置子菜单并将活动 class 添加到设置组。

如果您当前处于 /settings/notification 这意味着您可以识别以下内容：

活跃群
活动下拉菜单
活动子链接

我认为最好有自定义 LinkGroup 组件来检查它的 'activeness' 并添加特定的样式和 show/hide 它的子菜单。

如何跟踪 next.js 中活跃的 link？

How to track active link in next.js?

reactjs

next.js

antd