Bootstrap NavBar不會使用React-Router設置li class =「active」。 ReactJS

Question

我有一個名爲MenuAlumno的React-Component，它是一個Bootstrap NavBar。我是usign ES6 - ReactJS - React-Router。

這是我的組件：

render() { 
    return (
     <nav class="navbar navbar-default"> 

      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle navbar-collapse-left" data-toggle="collapse" data-target="#idNavBarCollapsed" aria-expanded="false"> 
       <span class="sr-only">Menú</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand visible-xs-block" /*href="http://www.upct.es/"*/><span id="idTextoLogotipo">- INCIDENCIAS -</span></a> 
      </div> 

      <div id="idNavBarCollapsed" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li><Link to='/administrador/inicio'>Inicio</Link></li> 
        <li><Link to='/administrador/nueva_incidencia'>Nueva Incidencia</Link></li> 
        <li><Link to='/administrador/incidencias_recibidas'>Incidencias Recibidas</Link></li> 
        <li><Link to='/administrador/informes'>Informes</Link></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li class="divider visible-xs-block"></li> 
        <p class="navbar-text navbar-text-center hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> 
        <p class="navbar-text navbar-text-center visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p> 
        <li class="navbar-text-center"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li> 
       </ul> 
      </div> 

     </nav> 
    ); 
} 

但是當我點擊一個<li>它沒有設置好的了活性。我怎麼解決這個問題？我嘗試了很多不同的東西，但我還沒有實現這一點......

此外，我想，如果我在一個路線，它不是在導航欄上定義（如：/administrador/inicio/hi/How_are_you/Fine）相應<li>將設置爲活動狀態（在此示例中爲/administrador/inicio），但是如果我將另一個元素（在NavBar上定義）設置爲：/administrador/inicio/hi，則這不是活動狀態（我通過window.location.pathname.include（'/ administrador/inicio '） - 這將激活兩個鏈接 - ）。激活只有父母<li>（<li>引發我的網址），而不是'可能的父母'。

另外，我希望當我點擊F5時，它會繼續保持活動狀態。

在這個項目中我不能使用React-Bootstrap，所以這個選項是不可能的。

我一直在溫暖我的頭很長一段時間試圖解決這個問題，但我仍然沒有得到它。歡迎任何幫助。

謝謝大家。

Answer 1

解決：

render() { 
    return (
     <nav class="navbar navbar-default"> 

      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle navbar-collapse-left" data-toggle="collapse" data-target="#idNavBarCollapsed" aria-expanded="false"> 
       <span class="sr-only">Menú</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand visible-xs-block" /*href="http://www.upct.es/"*/><span id="idTextoLogotipo">- INCIDENCIAS -</span></a> 
      </div> 

      <div id="idNavBarCollapsed" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li><NavLink to='/administrador/inicio'>Inicio</NavLink></li> 
        <li><NavLink to='/administrador/nueva_incidencia'>Nueva Incidencia</NavLink></li> 
        <li><NavLink to='/administrador/incidencias_recibidas'>Incidencias Recibidas</NavLink></li> 
        <li><NavLink to='/administrador/informes'>Informes</NavLink></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li class="divider visible-xs-block"></li> 
        <p class="navbar-text navbar-text-center hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> 
        <p class="navbar-text navbar-text-center visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p> 
        <li class="navbar-text-center"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li> 
       </ul> 
      </div> 

     </nav> 
    ); 
} 

Answer 2

我以前遇到過這個問題。你應該注意一些關於'這個道具'的道具，你可以找到路線已經改變了，然後你通過這個改變來做一些事情。

Answer 3

可能是你正在尋找這個

var selector = '.nav li'; 
 

 
$(selector).on('click', function(){ 
 
    $(selector).removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

li.active { 
 
    color: Red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav"> 
 
    <li style="cursor:pointer">Inicio</li> 
 
    <li style="cursor:pointer">Nueva Incidencia</li> 
 
    <li style="cursor:pointer">Incidencias Recibidas</li> 
 
    <li style="cursor:pointer"> Informes</li> 
 
</ul>