Bootstrap NavBar 不使用 React-Router 设置 li class="active"。反应JS

Question

我有一个名为 MenuAlumno 的 React-Component，它是一个 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 这不是活动的（我通过 window.location.pathname.include ('/administrador/inicio') 说这个-这将激活两个链接-）。仅激活父 <li>（<li> 将我带到该网址），而不是“可能的父母”。

另外，我希望当我单击 F5 时，它继续处于活动状态。

在这个项目中我不能使用 React-Bootstrap，所以这个选项是不可能的。

我很长时间以来一直在努力解决这个问题，但我仍然没有得到它。欢迎任何帮助。

谢谢大家。

Answer 1

我之前遇到过这个问题。你应该注意一下路线的“这个道具”，你可以发现路线已经改变，然后你通过这个改变来做一些事情。

Answer 2

也许你正在寻找这个

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>

Answer 3

已解决：

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>
    );
}