跟随路径高亮导航菜单：自定义 Hook 助力路由联动！

菜单联动路由：实现导航菜单的高亮效果

在现代前端应用中，导航菜单是必不可少的元素，它引导用户浏览网站内容。为了让用户始终清楚自己的位置，我们希望菜单项能够根据当前的 URL 高亮显示。然而，当使用 Antd Menu 组件和 React-Router-Dom 路由库时，菜单项的高亮联动功能却经常失效。

问题根源与解决方案

要解决这个问题，我们需要了解 Antd Menu 组件和 React-Router-Dom 路由库的工作原理。

Antd Menu 组件负责创建菜单，它有一个 activeKey 属性用于指定当前激活的菜单项。但是，它无法直接获取当前的 URL，因此无法根据 URL 激活正确的菜单项。

React-Router-Dom 路由库提供了 match 属性，可以获取当前路由信息，包括 URL。我们可以利用它来判断当前激活的菜单项。

综合以上信息，解决方案如下：

1. 使用 useHistory() 钩子获取当前的路由信息。
2. 使用 match 属性判断当前激活的菜单项。
3. 将激活菜单项的 key 传递给 Antd Menu 组件的 activeKey 属性。

自定义 Hook 简化实现

为了进一步简化实现，我们可以创建一个自定义 Hook 来封装判断菜单项逻辑。

import { useHistory } from "react-router-dom";

const useActiveKey = () => {
  const history = useHistory();
  const pathname = history.location.pathname;

  const activeKey = pathname.split("/")[1];

  return activeKey;
};

export default useActiveKey;

在组件中使用 Hook：

import useActiveKey from "./useActiveKey";

const MyComponent = () => {
  const activeKey = useActiveKey();

  return (
    <AntdMenu activeKey={activeKey}>
      {/* 菜单项 */}
    </AntdMenu>
  );
};

export default MyComponent;

结语

通过实现菜单项的高亮联动，我们可以大大提升用户体验，让他们始终清楚自己的位置并快速找到所需内容。本文提供了两种实现方法：直接使用 useHistory() 和 match 钩子，或者使用自定义 Hook，任君选择。

常见问题解答

1. 为什么菜单项无法跟随 URL 高亮？

   • Antd Menu 组件无法获取当前 URL，需要使用 React-Router-Dom 路由库的 match 属性来判断当前激活的菜单项。

2. 如何使用自定义 Hook 实现菜单项高亮？

   • 在组件中导入自定义 Hook，并将其返回值作为 Antd Menu 组件的 activeKey 属性。

3. 菜单项高亮的样式可以自定义吗？

   • 是的，可以通过 Antd Menu 组件的 className 属性自定义菜单项高亮的样式。

4. 菜单项高亮会影响网站性能吗？

   • 一般情况下不会，因为判断激活菜单项的逻辑非常简单，对性能影响可以忽略不计。

5. 在哪些情况下菜单项高亮可能失效？

   • 如果 URL 没有正确解析，或者 Antd Menu 组件没有正确配置 activeKey 属性，菜单项高亮可能会失效。