0

我想知道如何控制 Navlink 的类名，所以如果实际路径是 X，那么 NavLink 的类是活动的。我在使用 Laravel 和简单的引导程序之前就这样做了，但我不知道如何使用 React 和 Reactstrap 来做到这一点。

示例 Laravel：

<a href="{!!URL::to('link1')!!}" class="{{Request::is('link1') ? 'activeMenu' : '' }} >Link1</a>

我的 ReactJS 代码：

  <Nav className="navbar-logged">
    <NavItem>
      <NavLink className="nav-link-gdc" href="/">HOME</NavLink>
      <NavLink className="nav-link-gdc" href="#">LINK1</NavLink>
      <NavLink className="nav-link-gdc" href="#">LINK2</NavLink>
      <NavLink className="nav-link-gdc" href="#">LINK3</NavLink>
      <NavLink className="nav-link-gdc" href="#">LINK4</NavLink>
    </NavItem>
  </Nav>
4

2 回答 2

3

如果您使用的是反应路由器

只需在to参数中添加您的路径，而不是在href. 像这样：

`<NavLink className="nav-link-gdc" to="/">HOME</NavLink>`

它会自动添加类active。请参阅文档NavLink

如果不是，并且 NavLink 来自 reactstrap

然后，您将必须添加一些路由器逻辑才能将导航链接标记为活动，或者，如果您不需要更改地址栏中的 url，请在 SO

于 2017-11-22T11:34:58.873 回答
0

是的，我们可以控制 NavLink 的类名：-

 const pathName = this.props.history.location.pathname;
 <NavLink to='/pathNameHome' className='header__route--link'
    activeClassName={pathName === '/home || pathName === '/dashborad' ? 'header__route--active' : ''} >

在上面的代码'pathName'中，我们取自历史位置，如果你想在 pathName 上设置条件，那么你也可以这样做 {pathName === '/home || 路径名 === '/dashborad' ? 'header__route--active' : ''} 在这个块中我们正在比较路径，如果你想直接那么你可以写 activeClassName= 'header__route--active' 所以一旦选择了路径，类名 'header__route--active 将否则默认激活类名 header__route--link。

于 2017-11-22T11:55:13.807 回答