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

Question

我有一個名為MenuAlumno的React組件，它是一個Bootstrap NavBar。 我使用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該/administrador/inicio/hi未處於活動狀態（我通過window.location.pathname.include（'/ administrador / inicio'）表示）-this將同時激活兩個鏈接-）。 僅激活父母<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>