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

Question

我正在使用react-router-dom: 4.2.2。我可以将activeClassName添加到当前网址。但令人惊讶的是，该类始终添加到根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={}添加其他验证，以确保链接是否有效。

Here it is running in the playground

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

您需要添加的代码如下所示

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

您可以使用的另一个配置是“完全”，但无法在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

我最近遇到了这个问题，只需添加以下内容即可解决：

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

，然后将组件包装为：

export default withRouter(Component);

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

Answer 6

我现在正在学习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>

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

Answer 7

如果您尝试在单页网站和锚链接上使用 <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 8

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

我已经通过使用链接路径的精确关键字来解决这个问题，就像这样。我希望您是否会使用它并对此有任何问题，因此它可以提供帮助。 干杯。

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