Twitter bootstrap 引导导航栏不设置li类="；主动的；与反应路由器。反应

我有一个名为

MenuAlumno

的React组件，它是一个引导导航栏。我使用ES6-ReactJS-React路由器

这是我的组件：

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

render（）{
返回(
门努

伊尼西奥
新发病率
累犯发生率
告密者



Bienvenido，{this.state.nombre}（{this.state.dni}）

Bienvenido，{this.state.nombre}



);
}

但是，当我单击一个

时，它并没有设置为活动状态。我如何解决这个问题？我已经尝试了很多不同的东西，但我还没有做到这一点

此外，我希望，如果我所处的路线未在导航栏上定义（如：

/administrador/inicio/hi/How_you/Fine

），则相应的

将设置为活动（在本例中：

/administrador/inicio

），但如果我有另一个元素（在导航栏上定义）作为：

/administrador/inicio/hi

这不是活动的（我通过window.location.pathname.include（'/administrador/inicio'）-这将激活两个链接-）。仅激活父项（将我抛出到该url的父项），而不是“可能的父项”

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

在这个项目中，我不能使用React引导，所以这个选项是不可能的

我想解决这个问题已经有很长一段时间了，但我仍然没有得到它。欢迎任何帮助

---

谢谢大家。

我以前遇到过这个问题。你应该注意一些关于‘这个道具’的路线，你可以发现路线已经改变了，然后你通过这个改变来做点什么

也许你在找这个

var选择器='.nav li'；
$（选择器）。在（'单击'，函数（）上）{
$（选择器）.removeClass（'active'）；
$（this.addClass（'active'）；
});
li.active{
颜色：红色；
}


Inicio
Nueva Incidencia
重复发生率
信息
已解决：

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

render（）{
返回(
门努

伊尼西奥
新发病率
累犯发生率
告密者



Bienvenido，{this.state.nombre}（{this.state.dni}）

Bienvenido，{this.state.nombre}



);
}
非常感谢，但我不知道该如何处理它。我输入了：console.log（this.props），但或多或少返回了一个空对象，但这在必须使用F5重新加载时会出现问题。如果子路由不出现在导航栏中或不属于父路由，则单击也会出现问题。这不是在a元素上设置了它，而它应该在li上吗？