ReactJS 主动 NavLink

Question

我想知道如何控制导航链接的 class 名称，因此如果实际路径为 X，则导航链接的 class 处于活动状态。我在使用 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>`

并且它会自动添加class active。参见 the docs for NavLink

如果不是，则 NavLink 来自 reactstrap

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

Answer 2

Yes, we can control the class name of the NavLink:-

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

In above code 'pathName' we are taking from the history location, if you want to put condition on pathName then you can also do that {pathName === '/home || pathName === '/dashborad' ? 'header__route--active' : ''} in this block we are comparing the path , if you want directly then you can write activeClassName= 'header__route--active' so once the path is selected the class name 'header__route--active will activate else the class name header__route--link will be activated by default.

ReactJS 主动 NavLink

ReactJS active NavLink

javascript

css

twitter-bootstrap

reactjs

reactstrap

如果你正在使用 react-router

如果不是，则 NavLink 来自 reactstrap