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.但正如您所看到的,它也被添加到HomeNavLink中.

这是我的导航条代码:

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>

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

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 prop," 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 === "/";
}

您可以使用的另一个配置是" 精确 "但不可能在jsFiddle中演示它.我认为代码就像

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

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

Answer 2

我发现exact在第一次activeClassName作品之前添加也是如此.例如,您的设置可以是:

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

Answer 3

您可以将exact关键字用于活动类，例如

<NavLink exact to ='/'>Home</NavLink>

它会像那样产生

<a href="/" class="active" aria-current="page">Home</a>

如果您将获得另一个页面，它将是这样

<a href="/">Home</a>

Answer 4

2022年的正确答案是使用end道具。

<NavLink end {...props} />

根据文档：

如果使用 end 属性，它将确保当其后代路径匹配时，该组件不会被匹配为“活动”。例如，要呈现仅在网站根目录而不是任何其他 URL 处有效的链接，您可以使用

<NavLink to="/" end>
  Home
</NavLink>

参考： https: //reactrouter.com/en/v6.3.0/api