NavLink onActive 回调答案

【问题标题】：NavLink onActive callbackNavLink onActive 回调
【发布时间】：2023-03-03 01:27:01
【问题描述】：

有没有办法知道NavLink 何时处于活动状态？像这样？：

<NavLink to="/mylink" activeClassName="active" onActive={this.doSomething} />

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

您可以使用NavLink 的isActive 回调来实现此目的。 isActive 允许您在链接处于活动状态时定义自己的行为；它获取match 和您当前的location 对象。您可以修改它以获取一个回调，如果匹配为真，该回调将触发。这是一个简单的例子：

const isActive = onActive => (match, location) => {
  if (match) {
    onActive();
  }
  return match;
}

const App = () => {
  const onActive = () => console.log("link is active");
  return (
    <BrowserRouter>
      <div>
        <NavLink to="/abc" activeClassName="active" isActive={isActive(onActive)}>Go To ABC</NavLink>
        <Route path="/abc" render={() => <h1>ABC Page</h1>} />
      </div>
    </BrowserRouter>
  );
}

【讨论】：