如何在 next.js 中跟踪活动链接？

Question

I have a sidebar component in my admin panel which has multiple links. Some of these links are in the dropdown menu. Now I want to add an active class based on an active link or if the active link is in the dropdown menu then to the dropdown toggle. Below is my code for a sidebar. Btw I am using antd framework for ui.

<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>

Btw the selectedKey and toggleKey function comes from top level component and gotoPage is just router.push functionality.
Thanks.

Answer 1

As per this answer you should use useRouter hook to get current path.

For your use case instead of equality check you should probably use startsWith or maybe some other check. So it would look like this

Let's say you have

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

You check if current path starts /settings and you assume that Settings group is active and you simply expand Settings submenu and add active class to Settings group.

If you are currently on /settings/notification this would mean that you can identify following:

• active group
• active dropdown
• active sublink

I think it is better to have custom LinkGroup component that would check for its 'activeness' and would add specific styling and show/hide its submenu.