Root Navlink 总是获得活动类 React Router Dom

Posted 2023-02-22

【中文标题】Root Navlink 总是获得活动类 React Router Dom

【英文标题】：Root Navlink always get active class React Router Dom

【发布时间】：2018-06-01 10:58:09

【问题描述】：

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

在访问一个页面时，例如下面截图的错误页面，home navlink 也获得了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>

如何获得预期的行为？

【问题讨论】：

发布导致错误的示例网址

@Sujit.Warrier，更新了我的问题。希望现在很清楚。

【参考方案1】：

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

document

工作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>

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

【讨论】：

它就像一个魅力！但是我想知道是否没有默认方法而不是这种自定义的手写方法。谢谢。

添加了另一个可用的配置，希望对您有所帮助

这个答案确实有效，但已经有一个简单的、记录在案的方法，as answered by@digitalh2o

在 NavLink 上添加精确属性对我来说非常适合。谢谢！

exact 像魅力一样工作:)

【参考方案2】：

我发现在第一个 activeClassName 之前添加 exact 也可以。例如，您的设置可以是：

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

【讨论】：

有时，如果您的 URL 中有其他数据，例如某些过滤器，那么它就不会真正起作用。那么最好的解决方案是有一个函数来决定这一点。这就是为什么选择上面的答案。

【参考方案3】：

您可以使用exact 关键字作为活动类，例如

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

它会这样生成

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

如果你会得到另一个页面，那么它会是这样的

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

【讨论】：

这应该是公认的答案。不需要额外的功能。

我在所有链接上都使用精确的。但是，主页链接仍然有效。

@Erik 确保您删除了静态活动类

aria-current="page" 不需要因为 'page' 是默认值 =)

【参考方案4】：

我最近遇到了这个问题并通过简单地添加来解决它：

import  withRouter  from 'react-router-dom';

然后用：

包裹组件

export default withRouter(Component);

【参考方案5】：

更改您的代码

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

然后

const checkActive = (match, location) => 
  console.log(location);
  if (!location) return false;
  const  pathname  = location;
  const  url  = match;
  return pathname === url ? true : false;
;

注意 *

const  pathname  = location;
const  url  = match;
return pathname === url ? true : false;

【参考方案6】：

对我来说很好

<ul className="menu nav navbar-nav">
      <li><NavLink exact to="/" activeClassName="active-link active2">Home</NavLink></li>
      <li><NavLink to="/financial-summary" activeClassName="active-link active2">Financial Summary</NavLink></li>
      <li><NavLink to="/account-statement" activeClassName="active-link active2">Account Statement</NavLink></li>
      <li><NavLink to="/tools" activeClassName="active-link active2">Tools</NavLink></li>
      <li><NavLink to="/service-charges" activeClassName="active-link active2">Service Charges & Important Information</NavLink></li>
    </ul>

css

.active2, .active2 a:link, .active2 a:visited
    background: #004B8D !important;
    color: #FFFFFF !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

【讨论】：

这应该是公认的答案

【参考方案7】：

我现在正在学习 React，但遇到了同样的问题。我尝试了以下方法，它对我有用。

所以，我有 3 个导航链接。

<li><NavLink to="/home">Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>

但我添加了 4 条路线。

<Route exact path="/" component=Home></Route>
<Route path="/home" component=Home></Route>
<Route path="/about" component=About></Route>
<Route path="/contact" component=Contact></Route>

我为同一个组件（Home）添加了 2 个路由（/ 和 /home）。这样，react-router-dom 似乎只将“活动”类添加到您单击的链接中。

【参考方案8】：

如果您尝试在单页网站和锚链接上使用 <Navlink>，请务必将 <BrowserRouter> 替换为 <HashRouter>！

我必须删除斜线才能到达我的锚文本：<HashRouter hashType='noslash'>

有了这个设置，

<li><NavLink to="about">About</NavLink></li>

将渲染

<a href="#about" aria-current="page" class="active">About</a>

Documentation

【参考方案9】：

我正在使用 react-router-bootstrap 中的 LinkContainer，我仍然遇到这样的问题。主页链接始终处于活动状态。

我已经通过使用 exact 关键字作为链接路径 解决了这个问题。我希望您是否会使用它并且对此有任何问题，所以它可以提供帮助。 干杯。

Header.js 组件：

  <LinkContainer to="/" exact>
     <Nav.Link>
       <i className="fas fa-home mr-1"></i>Home
     </Nav.Link>
  </LinkContainer>

和 App.js 组件：

 <Route path="/" component=HomeScreen exact />
 <Route path="/about" component=AboutScreen exact />
 <Route path="/blogs" component=BlogScreen exact />