javascript - ReactJS 主动 NavLink

Question

我想知道如何控制 Navlink 的类名，如果实际路径是 X，则 NavLink 的类是事件的。我在使用 Laravel 和简单的 bootstrap 之前做过它，但我不知道如何用 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>

Answer 1

如果你正在使用 react-router

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

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

它会自动添加类active。参见 the docs for NavLink

如果不是，则 NavLink 来自 reactstrap

然后你必须添加一些路由器逻辑才能将导航链接标记为事件的，或者，如果你不需要更改地址栏中的 url，可以制作类似 this answer on SO 的内容。