Root Navlink 始终处于活动状态 class React Router Dom

Question

我正在使用 react-router-dom: 4.2.2。我可以将 activeClassName 添加到当前 URL。但令人惊讶的是 class 总是添加到根 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={} 添加额外的验证以确保 link 是否处于活动状态。

document

工作jsFiddle。（fiddle不是我创造的）

您需要添加的代码如下

js 中的示例fiddle

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

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

Answer 2

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

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

Answer 3

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

import { withRouter } from 'react-router-dom';

然后包装组件：

export default withRouter(Component);

Answer 4

您可以使用 exact 关键字来激活 class 例如

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

它会像那样生成

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

如果你会得到另一个页面，那么它就会像那样

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

Answer 5

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

所以，我有 3 个导航 links。

<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 似乎只将 class 'active' 添加到您单击的 link。

Answer 6

更改您的代码

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

Answer 7

对我来说很好

<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;
}

Answer 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

Answer 9

我正在使用来自 react-router-bootstrap 的 LinkContainer，我仍然遇到这样的问题。主页 link 一直处于活动状态。

我已经通过对 link 的路径使用 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 />

Root Navlink 始终处于活动状态 class React Router Dom

Root Navlink always get active class React Router Dom

javascript

reactjs

react-router-dom