React Router V6中如何让NavLink匹配多路径并激活？

当然可行，React Router V6提供了两种常用方式实现这个需求：

• 方法一：自定义NavLink的isActive回调函数
  NavLink组件支持传入isActive属性，你可以自定义判断逻辑，只要当前路径匹配"blabla"或"lala"就返回true，触发激活样式。修改你的代码如下：

  <NavLink
    isActive={({ location }) => {
      const targetPaths = ["blabla", "lala"];
      return targetPaths.includes(location.pathname);
    }}
    className={({ isActive }) =>
      concatClasses(classes, 'container', isActive ? 'container--active' : null)
    }
    to={props.route}
  >
    <EDSvg className={classes['container__icon']} name={props.iconName} />
    <span className={classes['container__text']}>{props.text}</span>
  </NavLink>
  

  这里通过location.pathname获取当前路径，判断是否在目标路径数组中，返回的布尔值会直接控制NavLink的激活状态。

• 方法二：使用useMatch钩子手动匹配路径
  如果需要支持更复杂的路径规则（比如带参数、通配符的路径），可以在组件内部用useMatch钩子分别匹配两个路径，再合并结果：

  import { useMatch } from 'react-router-dom';
  
  // 组件内部逻辑
  const matchBla = useMatch("blabla");
  const matchLala = useMatch("lala");
  const isActive = !!matchBla || !!matchLala;
  
  // 渲染NavLink
  <NavLink
    className={() =>
      concatClasses(classes, 'container', isActive ? 'container--active' : null)
    }
    to={props.route}
  >
    <EDSvg className={classes['container__icon']} name={props.iconName} />
    <span className={classes['container__text']}>{props.text}</span>
  </NavLink>
  

  useMatch在路径匹配成功时会返回匹配对象，失败则返回null，所以只要其中一个路径匹配成功，isActive就会为true。

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