Bootstrap NavBarは、React-Routerでli class = "active"を設定しません。 ReactJS

Question

MenuAlumnoというReact-ComponentはBootstrap NavBarです。私はus6を使用しています - 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> 
    ); 
} 

しかし、私はそれがアクティブとしてアップsettedされていない<li>をクリックしてください。どうすればこの問題を解決できますか？私は別のものをたくさん試していますが、まだ実現していません....

また、私はnavbar（例えば：/administrador/inicio/hi/How_are_you/Fineのような）に定義されていないルート上にあれば、対応する<li>は（この例では：/administrador/inicio）、私は別の要素（NavBarで定義されている）を持っている場合：/administrador/inicio/hiこれはアクティブではありません（私はwindow.location.pathname.include（ '/ administrador/inicio '） - これは両方のリンクをアクティブにします）。親である<li>（<li>）を有効にして、「可能な親」ではなく、そのURLに私をスローします。

また、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>