Root Navlink 始终获得活动类 React Router Dom

Question

我正在使用 react-router-dom: 4.2.2 。我可以将 activeClassName 添加到当前 URL。但令人惊讶的是，该类总是添加到根 URL。

在访问一个页面时，例如像下面截图这样的错误页面，主页导航链接也获得了 activeClass。

更新： 在上面的屏幕截图中，我显示我访问了 http://localhost:3000/#/error 。因此， active-link 应仅添加到 Love Error? NavLink。但正如您所见，它也被添加到 Home NavLink。

这是我的导航栏代码：

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

export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li> <NavLink to = '/' activeClassName="active-link">Home</NavLink> </li>
    <li> <NavLink to = '/about' activeClassName="active-link">About Us</NavLink> </li>
    <li> <NavLink to = '/error' activeClassName="active-link">Love Error?</NavLink> </li>
  </ul>
)

对于路由，我使用了以下 Switch：

 <Switch>
  <Route exact path = '/' component = {Home} />
  <Route exact path = '/about' component = {AboutUs} />
  <Route exact path = '/error' component = {Error404} />
  <Route path = "/news/:id" component = {NewsDetail} />
  <Route path="*" component={Error404} />
</Switch>

我怎样才能得到预期的行为？

原文由 arsho 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须使用 isActive={} 添加额外的验证以确保链接是否处于活动状态。

文档

工作 jsFiddle 。 （小提琴不是我创造的）

您需要添加的代码如下

jsfiddle 中的示例

<li><NavLink to="/" isActive={checkActive}>Home</NavLink></li>

更改代码

<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

检查 isActive 道具，“ checkActive ”是一个功能。

 const checkActive = (match, location) => {
    //some additional logic to verify you are in the home URI
    if(!location) return false;
    const {pathname} = location;
    console.log(pathname);
    return pathname === "/";
}

您可以使用的另一个配置是“ exact ”，但无法在 jsFiddle 中对其进行演示。我认为代码会像

<li> <NavLink exact to='/' activeClassName="active-link">Home</NavLink> </li>

希望这可以帮助。如果您需要更多信息，请告诉我。

原文由 Shashith Darshana 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我发现在第一个 activeClassName exact 也可以。因此，例如，您的设置可以是：

 export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li><NavLink to='/' exact activeClassName="active-link">Home</NavLink>
    </li>
    ....remaining NavLinks
  </ul>
)

原文由 digitalh2o 发布，翻译遵循 CC BY-SA 3.0 许可协议