javascript - 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>
  <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>

如何获得预期的行为？

Answer 1

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

document

工作 jsFiddle . ( fiddle 不是我创造的)

你需要添加的代码如下

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>

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