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

Question

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

我尝试过的：

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

Answer 1

目前还不是很清楚您要实现什么，但这是我的最佳猜测：您想通过某种方式了解 NavLink 是否处于活动状态。

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

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 处于活动状态时为真，在非活动时为假。你可以随心所欲地使用它。

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