Question

我想知道如何控制Navlink的className，所以如果实际路径是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

只需在<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function Hello() { var timeArea = document.getElementById("time"); var text = "Hello"; timeArea.value = text; }; Hello(); </script> </head> <body> <div id="time"> What time is it? </div> </body> </html>参数中添加路径，而不是在import java.util.Scanner; class FactorialTestDrive { private static Scanner input = new Scanner(System.in); private static int t, n, fact; public static void main(String[] args) { // TODO Auto-generated method stub do { t = input.nextInt(); } while (t < 1 && t > 100); for (int i = 0; i < t; i++) { do { n = input.nextInt(); fact = 1; } while (n < 1 && n > 100); for (int l = n; l > 1; l--) { fact = fact * l; } System.out.println(fact); } } }中。像这样：

to

它会自动添加课程href。见the docs for NavLink

如果没有，那NavLink来自reactstrap

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

的内容

Answer 2

是的，我们可以控制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 || pathName ==='/ dashborad'？ 'header__route - active'：''} in 这个块我们正在比较路径，如果你想直接然后你可以写activeClassName ='header__route - active'所以一旦路径选择类名'header__route - active将激活其他类名header__route - 默认情况下将激活链接。

ReactJS活动NavLink

2 个答案:

如果您使用的是react-router

如果没有，那NavLink来自reactstrap