如何监听NavLink的激活状态？是否支持onActive回调？

嘿，我来帮你搞定这个问题～首先得明确：React Router的NavLink组件本身并没有内置onActive这个回调属性，所以你写的那种直接传onActive的写法是没法直接生效的。不过我们可以通过其他方式来实现“当NavLink激活时执行特定逻辑”的需求，下面给你几种实用的方案：

方案1：函数组件中用useLocation监听路由变化 #

如果你用的是函数组件，可以借助useLocation钩子来监听当前路径的变化，然后判断路径是否匹配NavLink的目标地址，进而执行你的逻辑：

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

function MyNavigation() {
  const location = useLocation();

  // 当路径变化时触发检查
  useEffect(() => {
    const targetPath = '/mylink';
    // 判断当前路径是否匹配目标路径（和NavLink的默认激活逻辑一致）
    if (location.pathname === targetPath) {
      doSomething();
    }
  }, [location.pathname]);

  // 你要执行的激活回调逻辑
  const doSomething = () => {
    console.log('NavLink 已经激活啦！');
    // 这里可以放你的业务代码，比如发送统计、修改状态等
  };

  return (
    <NavLink to="/mylink" activeClassName="active">
      我的专属链接
    </NavLink>
  );
}

方案2：类组件中用withRouter包裹监听 #

如果你的项目还在使用类组件，可以通过withRouter高阶组件把路由相关的props注入到组件中，然后在componentDidUpdate生命周期里判断路径变化：

import { NavLink, withRouter } from 'react-router-dom';
import React, { Component } from 'react';

class MyNavigation extends Component {
  componentDidUpdate(prevProps) {
    const { location } = this.props;
    const targetPath = '/mylink';
    // 只有当路径发生变化，且当前路径匹配目标时才执行逻辑
    if (location.pathname !== prevProps.location.pathname && location.pathname === targetPath) {
      this.doSomething();
    }
  }

  doSomething = () => {
    console.log('NavLink 激活状态触发！');
    // 你的业务逻辑代码
  };

  render() {
    return (
      <NavLink to="/mylink" activeClassName="active">
        我的专属链接
      </NavLink>
    );
  }
}

// 记得用withRouter包裹组件才能拿到location props
export default withRouter(MyNavigation);

方案3：自定义带onActive的NavLink组件 #

如果需要在多个地方复用这个逻辑，最好的方式是封装一个自定义的NavLink组件，把激活回调的逻辑内置进去，用起来就像你原本期望的那样方便：

import { NavLink, useLocation, matchPath } from 'react-router-dom';
import { useEffect } from 'react';

const CustomNavLink = ({ to, activeClassName, onActive, exact = false, children }) => {
  const location = useLocation();

  useEffect(() => {
    // 用matchPath来精准匹配路径，和NavLink的激活逻辑完全对齐
    const isActive = matchPath(location.pathname, {
      path: to,
      exact: exact, // 和NavLink的exact属性保持一致
      strict: false
    });

    // 如果处于激活状态且存在onActive回调，就执行它
    if (isActive && onActive) {
      onActive();
    }
  }, [location.pathname, to, exact, onActive]);

  return (
    <NavLink to={to} activeClassName={activeClassName} exact={exact}>
      {children}
    </NavLink>
  );
};

// 使用的时候就可以直接传onActive啦！
<CustomNavLink 
  to="/mylink" 
  activeClassName="active" 
  exact={true}
  onActive={() => console.log('自定义NavLink激活了！')}
>
  我的专属链接
</CustomNavLink>

这个自定义组件的好处是，完全兼容NavLink的所有原有属性，同时新增了onActive回调，使用体验和你最初设想的写法几乎一致～

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