如何将React Router激活态NavLink与MenuItem子组件集成？

这事儿其实很简单，react-router-dom的NavLink专门提供了方式来获取激活状态，给你两种实用的实现方案：

方法一：直接使用NavLink的children函数模式 #

这是最直接的写法，NavLink允许你把children写成一个函数，它会自动传入一个包含isActive状态的对象参数，你只需要把这个状态直接传给MenuItem的active属性就行：

<Menu>
  <NavLink to="link1">
    {/* 这里通过函数接收激活状态 */}
    {({ isActive }) => (
      <MenuItem active={isActive} text="link1" />
    )}
  </NavLink>
  <NavLink to="link2">
    {({ isActive }) => (
      <MenuItem active={isActive} text="link2" />
    )}
  </NavLink>
</Menu>

这个函数参数里还包含isPending（路由加载中的状态），如果你的项目用到了路由懒加载，可以顺便用这个状态做加载态提示，不过现在你只需要isActive就够了。

方法二：封装自定义组件（适合菜单较多的场景） #

如果你的菜单选项很多，不想重复写children函数，可以封装一个复用性更强的自定义组件，结合useMatch钩子来判断路由匹配状态：

import { NavLink, useMatch } from 'react-router-dom';

// 封装一个导航菜单组件
const NavMenuItem = ({ to, text }) => {
  // useMatch会判断当前路由是否和传入的to路径匹配
  const match = useMatch(to);
  // 把匹配结果转成布尔值，就是激活状态
  const isActive = !!match;

  return (
    <NavLink to={to}>
      <MenuItem active={isActive} text={text} />
    </NavLink>
  );
};

之后使用的时候就非常简洁了：

<Menu>
  <NavMenuItem to="link1" text="link1" />
  <NavMenuItem to="link2" text="link2" />
</Menu>

这种方式更干净，而且方便后续扩展菜单的其他功能（比如添加图标、权限控制等）。

注意：以上两种方案都适用于react-router-dom v6及以上版本，这也是目前的主流版本。

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