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处于活动状态时为true，而为非活动状态时为false。您可以根据需要使用它。

我不确定您要使用active道具来完成什么工作，但这对于NavLink来说不是有效的道具。

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

1 个答案: