reactjs - 反应路由器 NavLink 活动属性而不是 activeClassName

Question

有没有办法在active属性中而不是activeClassName在 React Router NavLink 上设置活动状态？由于特定原因，它需要处于活动状态。NavLink 中有这个isActive功能，我认为它可能对实现我的需要很有用。但到目前为止我还没有结果。我在想像下面这样的东西，但它不起作用。

我试过的：

const abc = (match, location) => {
  return match;
}
<NavLink to="/faq" isActive={abc} active={props.isActive ? "true" : null}>
  FAQs
</NavLink>

Answer 1

目前尚不清楚您要实现的目标，但这是我最好的猜测：您需要某种方式来了解 NavLink 是否处于活动状态。

默认情况下，如果 NavLink 与您在 中提供的 URL 匹配，则该导航链接处于活动状态to。您可以使用matchPathReact Router 提供的方法手动执行此检查：

import { matchPath } from "react-router";

const toUrl = '/faq';

const isActive = matchPath(toURL, {
  path: this.props.match.path,
});

<NavLink to={toUrl}>
  FAQs
</NavLink>

这将检查当前路径是否匹配“/faq”。现在您有一个变量isActive，当 NavLink 处于活动状态时为 true，在非活动时为 false。您可以将其用于任何您想要的。

我不确定你想用active道具完成什么，但这不是 NavLink 的有效道具。